Как закрыть модальное окно при клике на overlay

Открываю по ссылке вебформу в модальном окне

<a href="/form/request" class="btn btn_orange_white btnBig use-ajax" data-dialog-type="modal">{{'Send request'|trans}}</a>

В модальном окне есть кнопка закрыть, так же можно закрыть с клавиатуры через Esc, не могу найти как добавить закрытие через клик на слой overlay.

Версия Drupal:

8.x

Вопрос задан 23.07.2019 - 13:04

Denis

Ответы

//Расширяем стандартный диалог. Добавляем функции на открытие и закрытие окна диалога
jQuery.extend(jQuery.ui.dialog.prototype.options, {
  open: function( event, ui ) {
    //Тут можно добавить, чтобы при клике на определённый селектор закрывался модальный диалог
  }
});

Ответ дан 23.07.2019 - 14:14

shu

176

Denis

Спасибо
Оставлю кусочек кода тут

~~~php
jQuery.extend(jQuery.ui.dialog.prototype.options, {
    open: function (event, ui) {
        var dialog = this;
        $('.ui-widget-overlay').on('touchstart click', function () {
            $(dialog).dialog("close");
        });
    }
});

~~~

Доп вопрос :)
что лучше использовать .dialog( "close" ); или .dialog( "destroy" );
Не совсем понял в чем их разница.

Комментарий оставлен 24.07.2019 - 11:02

shu

В доках немного написано по этому поводу: https://api.jqueryui.com/dialog/#method-close

И ещё тут: https://stackoverflow.com/questions/18055724/difference-between-dialogcl...

close leaves the dialog configured, but invisible, so you can reopen it again with .dialog('open').

destroy will completely deconfigure the dialog box. It'll remove all of the UI elements that were added to the DOM, and any related event handlers.

destroy will not remove the element that held the contents of the dialog box (i.e. the element that you call .dialog on)

Комментарий оставлен 25.07.2019 - 08:29

Вы здесь

Как закрыть модальное окно при клике на overlay

Ответы