从导航栏打开“模态”窗口 [英] Open an Modal window from Navigation bar

问题描述

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

I'm trying to open a modal window from navigation bar. I've followed some good tutorials and once I pressed my link a modal opened, problem is model window looks like not editable for some reason, can't even close the X in the modal window. The same works great outside the nav bar.

我想知道为什么会这样。

I would like to know why this happens.

我的代码如下：

<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>

屏幕截图：

推荐答案

官方报道文档：

模态标记位置

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

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.

Put < div> 在导航栏之外有模态类。您可以在导航栏中保留模态触发< a> 。

Put the <div> that has the modal class outside of the navbar. You can leave the modal-triggering <a> in the navbar.

这篇关于从导航栏打开“模态”窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！