Question

我正在使用一个网页，我正在使用bootstrap drop down和modal popup。

我将模态弹出窗口放在drop down div中。弹出窗口打开并完美运行。

我得到的问题是每当我调整窗口大小时，当窗口达到最小宽度时，模态弹出窗口会被隐藏。

我希望弹出窗口留在页面上。

以下是代码：

<div class="btn-group dropdown">
        <button type="button"
                id="btnCalculate"
                data-toggle="dropdown"
                class="dropdown-toggle">
            Calculate
        </button>
        <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
            <div class="col-md-12">
                <row>
                    <label class="control-label">Test</label>
                    <button name="getBalance"
                            type="submit"
                            data-toggle="modal"
                            data-target="#myModal"
                            class="btn btn-default"
                           >
                        Balance
                    </button>
                </row>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

由于

Answer 1

直接将模态附加到<div class="container">标记，而不是下拉菜单。

如下所示：

<div class="container">
    <div class="btn-group dropdown">
        <button type="button"
                id="btnCalculate"
                data-toggle="dropdown"
                class="dropdown-toggle"> Calculate </button>
        <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
            <div class="col-md-12">
                <row>
                    <label class="control-label">Test</label>
                    <button name="getBalance"
                            type="submit"
                            data-toggle="modal"
                            data-target="#myModal"
                            class="btn btn-default">
                        Balance
                    </button>
                </row>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>

    </div>

将模态置于低级位置（例如下拉菜单）并不是预先设定的。见 how modals work

模态使用position：fixed，有时候它的渲染有点特别。只要有可能，请将模态HTML放在顶层位置，以避免来自其他元素的潜在干扰。将.modal嵌套在另一个固定元素中时，您可能会遇到问题。

但是，如果您坚持将模式保留在下拉菜单中，则需要阻止在调用模态时关闭下拉菜单，并确保将其置于.modal-backdrop

JS代码：

$('.dropdown').on('hide.bs.dropdown', function () {
     return false;
});

并将z-index:auto添加到dropdown-menu样式

调整窗口大小时，Bootstrap Modal会被隐藏

1 个答案: