Question

我正在关注w3school教程 http://www.w3schools.com/bootstrap/bootstrap_modal.asp 在我的html页面中添加模态。

显示模态没有问题。但是当我关闭模态时，屏幕会变灰并且几秒钟内无法访问。之后，屏幕再次响应。它只在我的页面启动时第一次发生。

我试过以下：

<button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>

但它并没有消除灰色。我不知道如何修复它。请帮我！提前致谢！

编辑：这是可以点击的部分：

<a data-toggle="modal" data-target="#tt-modal">
    <div id="tt">
        <div class="desc_hidden">
             <div class="title"> Product name </div>
             <div class="subtitle"> Description </div>
             <div class="view">VIEW PROJECT</div>
       </div>
    </div>
</a>

因此，点击以上部分后将显示以下模式：

<div id="tt-modal" class="modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" data-backdrop="false">&times;</button>
            </div>
            <!-- some information here -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>
            </div>  
        </div>
    </div>
<div>

Answer 1

试试这个：

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

祝你好运。

我测试了你的模态，它解决了任何问题。只是存在一些小问题，你不需要在标题和页脚按钮中定义data-backdrop="false"属性，而是将此属性设置为触发模式按钮。

关闭模态后，Bootstrap模态背景仍然存在

1 个答案: