Question

我有一个条款＆amp;条件模态我试图在引导页面上显示。当点击链接时，模态显示为瞬间，然后页面变黑，我必须刷新。有什么想法吗？

<div class="navbar-fixed-bottom" style="background: gray;text-align: center;font-size: 10px;color: white;" >
    <a href="#" data-toggle="modal" data-target=".modal" style="color: white;">
        Terms and Conditions
    </a>
    <div class="modal fade" id="openModal">
        <div class="modal-dialog">
            <div class="modal-body">
                <div class="modal-content" style="color: black;text-align: left;padding-left: 10px;padding-right: 10px;padding-bottom: 20px;">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                 TEXT TEXT TEXT

                </div>
            </div>
        </div>
    </div>

Answer 1

您的模式不能成为导航栏的一部分。

<强> FIDDLE

HTML：

<div class="navbar-fixed-bottom" style="background: gray;text-align: center;font-size: 10px;color: white;" >
    <a href="#" data-toggle="modal" data-target=".modal" style="color: white;">
        Terms and Conditions
    </a>
</div>
    <div class="modal fade" id="openModal">
        <div class="modal-dialog">
            <div class="modal-body">
                <div class="modal-content" style="color: black;text-align: left;padding-left: 10px;padding-right: 10px;padding-bottom: 20px;">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                 TEXT TEXT TEXT

                </div>
            </div>
        </div>
    </div>

注意我是如何抓住导航栏的div的。一旦你这样做并且模态在它之外，它就会弹出正常。

Answer 2

试试这个：

$('#myLauncher').click(function(){
    $('#openModal').modal();
});

Bootstrap Modal立即消失

2 个答案: