BootStrap模态：多个模态打开，当最后一个模态取消时，会挂起页面。

Question

对不起，我不明白这个问题，但我有2个模型

<!-- Upload Document Modal 1 -->
<div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadFileModalLabel">@lang('pagetexts.client_view_models.upload_file')</h5>
                <button type="button" id="closeUploadModal" class="close" data-target="#uploadFileModal" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <form action="/initial-document-upload" class="dropzone" id="dropzoneUpload" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" value="{{$client_data->id}}" id="clientid" name="clientid"/>
                        </form>
                    <!-- <div class="col-12 text-center d-flex upload-holder" data-toggle="modal" data-target="#uploadFileModal2" data-dismiss="modal">
              <div class="align-self-center text-center col-12 d-block">@lang('pagetexts.client_view_models.drag_and_drop_here') <a href="JavaScript:Void(0);">browse</a></div>
            </div> -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-12"> <em style="word-wrap: break-word;">@lang('pagetexts.client_view_models.file_accept_are')</em> </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="can-upl-btn" data-target="#uploadFileModal1" data-dismiss="modal" class="btn btn-secondary">@lang('pagetexts.client_view_models.cancel')</button>
            </div>
        </div>
    </div>
</div>

模式2

<!-- Update Document Modal 2 -->
<div class="modal fade" id="uploadFileModal2" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal2Label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadFileModal2Label">@lang('pagetexts.client_view_models.upload_file')</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label for="">@lang('pagetexts.client_view_models.document_title')</label>
                            <input type="text" class="form-control" id="Titlex" value="">
                        </div>
                        <div class="form-group">
                            <label for="">@lang('pagetexts.client_view_models.notes')</label>
                            <textarea class="form-control" id="Notesx" rows="3"></textarea>
                        </div>
                        <a href="" class="btn btn-secondary" data-toggle="modal" data-target="#tagModal">@lang('pagetexts.client_view_models.apply_tags')</a>
                        <div class="custom-control custom-checkbox mt-3">
                            <input type="checkbox" class="custom-control-input" id="customCheck1x">
                            <label class="custom-control-label" for="customCheck1x">@lang('pagetexts.client_view_models.share_with_client')</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" value="" id=documentid" name="documentid"/>
                <button type="button" id="can-file-upd" data-target="#uploadFileModal2" data-dismiss="modal" class="btn btn-secondary" >@lang('pagetexts.client_view_models.cancel')</button>
                <button type="button" class="btn btn-primary">@lang('pagetexts.client_view_models.save_changes')</button>
            </div>
        </div>
    </div>
</div>

这个动作是当第一个模态成功上传文件时，它应该打开模态2，然后应该提交表单来更新第一个模态中上传的详细信息。我是这样触发过渡的

this.on('success', function(event, response) {
                    $('#uploadFileModal').modal('hide');
                    $('#uploadFileModal2').modal('show');
                })

当我提交模态2到表单时，它成功地更新了数据，然而，当我取消模态2时，页面中的任何东西都无法使用，我不能点击任何地方，任何想法都是为什么？

Answer 1

多个开放模式是 不支持 由Bootstrap。你必须记住 .modal() 是异步的，所以接下来的 .modal() 将会在前一个完成之前运行。所以，你可能有一个覆盖在你的页面上的叠加，尽管它所赋予的样式使你无法看到它。

这个 可能 工作。

this.on('success', function(event, response) {

    $('#uploadFileModal')
        .on('hidden.bs.modal', function(){ 
            $('#uploadFileModal2').modal('show'); 
        })
        .modal('hide');
});

这将延迟第二个模态的触发时间 直到第一个模态完成了隐藏过渡。