Question

我有一个模态窗口，但当我关闭模态时，我的页面被阻止了。我什么都做不了。我需要刷新页面才能让一切恢复正常！奇怪的是，有时一切都运作良好或有时一切都被阻止了！

打开模型的按钮：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>

我的模态窗口代码：

<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form id="formUpdateProgress" >
                {!! csrf_field() !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Complaint Progress</h4>
                </div>
                <div class="modal-body">
                    <label class="control-label">Insert code:</label>
                    <div id='complaintProgress' style="position: relative;">
                        <input type="text" name="code" id="code" placeholder="Insert the code here">
                    </div>                   
                </div>
                <div class="modal-footer">                              
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form> 
        </div>
    </div>
</div>
<!-- END MODAL -->

当我提交表单时，我关闭了模型！

$( '#formUpdateProgress' ).on( 'submit', function(e) {
    $('#myModalCode').modal('hide');
});

实施例

我的应用程序中的模态窗口：

然后我点击提交，一切正常，文档被批准但是有些东西锁定了页面：

知道网页被阻止的原因吗？提前致谢

Answer 1

此处讨论了类似的问题：

How to hide Bootstrap modal from javascript?

似乎您的模式处理提交的方式存在一些问题。也许最容易修复的方法就像上面链接中的一条评论中提到的那样，添加以下修复来删除背景：

$('.modal-backdrop').hide();

或者，您甚至可以删除（）它。我认为，如果打开，模态会再次重新创建它。

Answer 2

看起来你正在使用bootstrap modal。 Bootstrap不仅打开模态，还打开页面掩码。所以你需要调用bootstrap方法来关闭。使用代码检查器，您可以找到body = class =“modal-open”和额外的div，其中“modal-backdrop fade in”

只需使用<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>或yr元素与'data-dismiss =“modal”'一起使用即可。

Answer 3

    function closeModal(name){
         $("#"+name).modal('hide');
         // I added the next line
         $('.modal-backdrop').hide();
    }

我添加$（'。modal-backdrop'）。hide（）;一切都还可以:)）

模态窗口会阻止我的页面

3 个答案: