html - 从导航栏打开模态窗口

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

这涵盖了 in the official documentation :

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

把 <div>有 modal导航栏之外的类。你可以离开模态触发 <a>在导航栏中。