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

多个打开模式是 not supported 到 Bootstrap。您必须记住 .modal() 是异步的，因此下一个 .modal() 将在前一个完成之前进入运行。因此，您可能有一个覆盖层覆盖了您的页面，即使它提供的样式阻止您看到它。

这个可能有效：

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

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

这将延迟触发第二个模态，直到第一个模态完成它的隐藏转换。

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

BootStrap Modal: Multiple modal open, and when last modal cancelled it hangs the page

jquery

laravel

bootstrap-modal

bootstrap-4