Question

我使用angularJS和bootstrap，我创建了一个模式，当你点击一个按钮时会显示一些信息。

由于页面周围会有多个按钮，我希望这个模式在点击的按钮附近弹出，就像模式左上角位于我单击的按钮顶部。这可能吗？我试了很多东西，模态总是弹出屏幕中间。

我尝试的当前代码是：

    .modal.in {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    top: auto;
    bottom: 0;
    overflow: auto;
}

.testbox {
    background: #fff;
    color: #000;
    padding: 10px;
    min-height: 200px;
    min-width: 300px;
    position: absolute;
}

这里是具有模态内容的htm页面：

<div class="testbox">
<div class="modal">
    <div class="modal-header">
        <h3 class="modal-title" ng-bind-html="title"></h3>
    </div>
    <div class="modal-body">
        <span ng-bind-html="fullText"></span>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" ng-click="close()"><i class="fa fa-close"></i></button>
                </div>
            </div>
        </div>
    </div>

我在css中尝试了很多东西，但似乎没有人工作，我可以用position: fixed得到一些东西但当然只有一个按钮。有什么想法吗？

Answer 1

您可以考虑使用bootstrap popover来执行此操作。这是一个例子

<button type="button" class="btn btn-danger popover-dismiss" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>

如何在点击按钮附近弹出一个模态？

1 个答案: