BootStrap Модальный режим: открытие нескольких модальных окон, при последнем отмене модального окна страница зависает. - PullRequest
Новая
       80

BootStrap Модальный режим: открытие нескольких модальных окон, при последнем отмене модального окна страница зависает.

0 голосов
/ 28 мая 2020

Извините, я не понимаю, но у меня есть 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, а затем следует отправить форму, чтобы обновить детали для загрузки в 1-й. Вот как я запускаю переход 

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

Когда я отправляю модальное окно 2 в форму, он успешно обновляет данные, ОДНАКО, когда я отменяю MODAL 2, ничто на странице не используется, я не могу щелкните где угодно, есть идеи, почему?

1 Ответ

1 голос
/ 28 мая 2020

Множественные открытые модальные окна не поддерживаются Bootstrap. Вы должны помнить, что .modal() является асинхронным, поэтому следующий .modal() будет запущен до завершения предыдущего. Итак, у вас, вероятно, есть наложение, покрывающее вашу страницу, даже если заданные стили мешают вам его видеть.

Это может работать: 

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

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

Это будет отложить запуск второго модального окна до тех пор, пока первый модальный не завершит свой переход скрытия.

...