событие закрытия модального всплывающего окна magento 2 js
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Title',
buttons: [{
text: $.mage.__('Proceed'),
class: '',
click: function () {
/* some stuff */
this.closeModal();
}
}]
};
var popup = modal(options,$('#popup-modal'));
$('#popup-modal').modal('openModal');
}
);
Всплывающее окно работает нормально, но я хочу выполнить некоторый код, когда всплывающее окно закроется.
Спасибо за ответы,
Всплывающее окно можно закрыть, нажав кнопку x или escape key.
Но я не думаю, что добавление нескольких событий для нажатия и нажатия клавиш - хорошая идея.
5 answers
Вам не нужно расширять модальный.
Вам просто нужно прослушать событие 'modalclosed' в элементе DOM, в котором был вызван модальный. Фактически функция modal() возвращает этот элемент, что делает код тривиальным.
$('#popup-modal').on('modalclosed', function() {
/*insert code here*/
});
Вам необходимо расширить функцию виджета _close в вашем пользовательском модуле.
Выполните следующие действия для достижения своей задачи:
Сначала создайте requirejs-config.js с кодом:
var config = {
map: {
'*': {
custommodal: 'Vendor_Modulename/js/custom',
}
}
};
Создайте свой файл js в своей веб-папке:
define([
'jquery',
'jquery/ui',
'Magento_Ui/js/modal/modal'
],
function($){
$.widget('custommodel', $.mage.modal, {
_close: function () {
/*write your custom code here */
console.log('hello world');
/* below function is used for call parent function */
this._super();
}
});
return $.custommodel;
}
);
Вызовите этот файл js в свой файл phtml:
require(
[
'jquery',
'custommodal'
],
function(
$,
custommodal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Title',
buttons: [{
text: $.mage.__('Proceed'),
class: '',
click: function () {
/* some stuff */
this.closeModal();
}
}]
};
var popup = custommodal(options,$('#popup-modal'));
$('#popup-modal').custommodal('openModal');
}
);
Вы можете использовать это:
$('.action-close').click(function(){
<your code...>
});
Если вы хотите закрыть модель, то вам следует использовать класс closeModal() виджета модели
Например:
$('#popup-modal').modal('closeModal');
Как вы хотите выполнить некоторый код, когда всплывающее окно закроется, нажав на кнопку закрыть.
Тогда, я думаю, вы уже поступили правильно.На click() функция в /* some stuff */ Вам нужен ваш код.
click: function () {
/* some stuff */
this.closeModal();
}
Также класс: "Вы можете установить свой класс кнопок Как class: '' .
Если вы хотите выполнить какой-то код, когда ваш closeModal(); это невозможно. Тогда Ты следует создать пользовательский виджет, следуя модальной модели magento по умолчанию
closed: function () {
//do the magic here
}
Я знаю, что опаздываю, но это может помочь вам по умолчанию Поместите этот код в свой массив параметров.