如何将 Bootstrap 模态带到单击的按钮位置？

Question

如何将Bootstrap 模态带到单击的按钮位置？我正在研究一个Iframe小型设备模式弹出窗口（显示在页面顶部）上的一个区域。我们需要滚动到顶部才能看到 \xe2\x80\x94 如何解决这个问题

\n

<div class="container">\n    <h2>Modal Example</h2>\n    <!-- Trigger the modal with a button -->\n    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>\n    <!-- Modal -->\n    <div class="modal fade" id="myModal" role="dialog">\n        <div class="modal-dialog">\n            <!-- Modal content-->\n            <div class="modal-content">\n                <div class="modal-header">\n                    <button type="button" class="close" data-dismiss="modal">&times;</button>\n                    <h4 class="modal-title">Modal Header</h4>\n                </div>\n                <div class="modal-body">\n                    <p>Some text in the modal.</p>\n                </div>\n                <div class="modal-footer">\n                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n

\n

Answer 1

您需要更改 Bootstrap 模式的行为

position:fixed

到

position:absolute

什么是默认行为？默认行为意味着与默认情况下您在 Twitter Bootstrap 网站上看到的模态弹出窗口相同的行为。什么是行为改变？默认情况下，模式弹出窗口的打开位置为：固定，但我已将其更改为位置：绝对。