javascript - 模态窗口阻止了我的页面

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();

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