如果按钮未放置在模态主体内，则关闭 bootstrap 模态

Question

所以，我有这个模式用于全屏菜单，关闭按钮在这种形式下工作得很好：

<div class="modal fade" id="hidden-links">
    <div class="modal-dialog">
        <div class="modal-content hidden-links">
            <div class="modal-body">
                <div data-dismiss="modal" aria-label="Close">
                    <i class="fa fa-times fa-fw fa-2x"></i>
                </div>
                <ul class="links-hidden" role="menu">
                <!--Hidden links here-->
                </ul>
            </div>
        </div>
    </div>
</div>

我想做的是移动：

<div data-dismiss="modal" aria-label="Close">
    <i class="fa fa-times fa-fw fa-2x"></i>
</div>

在 .modal-body 之外，所以我可以实现这样的目标：

我已经进行了一些挖掘，但找不到适合我的问题的解决方案，有什么想法吗？

Answer 1

稍微更改标记：

<div class="modal fade" id="hidden-links">
    <div data-dismiss="modal" aria-label="Close">
        <i class="fa fa-times fa-fw fa-2x"></i>
    </div>
    <div class="modal-dialog">
        <div class="modal-content hidden-links">
            <div class="modal-body">
                <ul class="links-hidden" role="menu">
                    <!--Hidden links here-->
                </ul>
            </div>
        </div>
    </div>
</div>

然后添加 CSS:

div[data-dismiss="modal"]{
  color:#ffffff;
  position:fixed;
  top:10px;
  right:20px;
  cursor:pointer;
}

如果按钮未放置在模态主体内，则关闭 bootstrap 模态

Close bootstrap modal if the button is not placed inside modal-body

html

css

jquery

twitter-bootstrap

bootstrap-modal

See it in action here