从导航栏打开"模态"窗口

Question

我正试图从导航栏打开一个模态窗口.我已经按照了一些很好的教程,一旦我按下我的链接打开了一个模态,问题是模型窗口看起来因为某些原因不能编辑,甚至无法关闭模态窗口中的X. 同样在导航栏外工作得很好.

我想知道为什么会这样.

我的代码如下:

<ul class="nav navbar-nav pull-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#" data-toggle="modal" data-target="#basicModal">Contact Us</a></li>
</ul>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

截图:

Answer 1

这包含在官方文档中:

模态标记放置

始终尝试将模态的HTML代码放在文档的顶级位置,以避免影响模态外观和/或功能的其他组件.

把<div>那个有modal类的东西放在导航栏之外.您可以将模态触发<a>留在导航栏中.

Answer 2

<nav class="navbar bg-secondary">
        <div
            class="collapse navbar-collapse float-right" id="navcol-1" style="color:rgb(255,255,255);">
            <ul class="nav navbar-nav ml-auto" role="navigation">
                <li><a href="#myModal" data-toggle = "modal" data-target= "#myModal" class="nav-link">Contact us</a></li>
                </ul>
        </div>
    </div>
</nav>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <div class="modal-header">
                <h5 class="modal-title">For your Queries</h5> 
            </div>
            <div class="modal-body">
                IF you have any questions, Mess Manager Office number is <strong>+01234567890</strong> or you can email us by <strong>Ouremail@domain.com</strong>>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>