Мутное модальное окно в google Chrome

Описание

При открытии модалки оборачиваем <div class="ui-dialog"></div> в <div class="ui-dialog-wrapper"></div>, для которого задаем через стили фиксированную позицию и выравнивание через "display: flex".

А при закрытии окна удаляем этот див.

Codes

CSS

Код

      .ui-dialog-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.ui-dialog {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    z-index: 1000;
    padding: 0;
    border: none !important;
    background: #fff;
    border-radius: 0;
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    // transform: translateX(-50%) translateY(calc(-50% - .5px)) translateZ(0);
    // transform: translateX(-50.09%) translateY(calc(-50.09% - .5px)) translateZ(0);
    // backface-visibility: hidden;
    @include max-screen(991px) {
        width: 100% !important;
        height: 100% !important;
        max-height: 100%;
        overflow: auto;
    }
}

Код

      jQuery.extend(jQuery.ui.dialog.prototype.options, {
    open: function (event, ui) {
        $('.ui-dialog').once().wrap('');
        // $('body').pageScrollHide(); // ЗАПРЕЩАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
    },
    beforeClose: function( event, ui ) {
        $(this).dialog("destroy");
        $('.ui-dialog-wrapper').remove();
        // $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
    },
    close: function (event, ui) {
        // $('.ui-dialog-wrapper').remove();
        // $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
    }
});

Код

      $(document).on("dialogcreate", function( event, ui ) {
    console.log("dialogcreate");
    // console.log( event );
    $('.ui-dialog').once().wrap('');
});
$(document).on("dialogbeforeclose", function( event, ui ) {
    console.log("dialogbeforeclose");
    $('.ui-dialog-wrapper').remove();
    $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
});
$(document).on("dialogclose", function( event, ui ) {
    // console.log( event );
    console.log("dialogclose");
    $('.ui-dialog-wrapper').remove();
    $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
});

Код

      if ($('.ui-dialog:visible').length) {
    $('body').pageScrollHide(); // БЛОЧИМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
    if ( !$('.ui-dialog-wrapper').length ) {
        $('.ui-dialog').wrap('');
    }
}
$(document).keydown(function(eventObject){
    if( eventObject.which == 27 ){
        if ($('.ui-dialog:visible').length) {
            $('.ui-dialog-wrapper').remove();
            $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
        }
    };
});
jQuery('.ui-dialog-titlebar-close').on("click", function() {
    $('.ui-dialog-wrapper').remove();
    $('body').pageScrollShow(); // РАЗРЕШАЕМ ПОЛОСУ ПРОКРУТКИ У СТРАНИЦЫ
});

Код

      $.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        $('.ui-dialog').not('.feedback-call-form__ui-dialog').once().wrap('');
        return this._super();
    },
    close: function () {
        $('.ui-dialog-wrapper, .autodialog-content').remove();
    }
});