拦截 Magento 2 中模态特征的事件

Question

我需要拦截 Magento 2 中模态弹出窗口的 "closed" 事件，但我不知道在哪里以及如何做。

这是模板文件中的脚本，效果很好，但正如我所写，我需要拦截关闭事件以停止视频播放。

<script>
    require(
            [
                'jquery',
                'Magento_Ui/js/modal/modal'
            ],
            function ($, modal) {
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: $.mage.__('Title Text'),
                    buttons: [{
                            text: $.mage.__('Close'),
                            class: '',
                            click: function () {
                                this.closeModal();
                                var video = document.getElementById("Video1");
                                video.pause();
                            }
                        }]
                };
                var popup = modal(options, $('#modalVideo'));
                $("#modalVideoOpen").on("click", function () {
                    $('#modalVideo').modal('openModal');
                    var video = document.getElementById("Video1");
                    video.play();
                });
            }
    );
</script>

Answer 1

$('#modalVideoOpen').data('mage-modal').modal.on('modalclosed', function(){console.log('closed')})

模态小部件触发 'closed' 事件，正如 jquery doc 所说 "the event type is determined by concatenating the plugin name and the callback name"，我们应该订阅 'modalclosed'

Answer 2

你也可以在选项中指定:

var options = {
    type: 'popup',
    responsive: true,
    title: $.mage.__('Title Text'),
    closed: function (e) {
        // fun here!
    }
};

拦截 Magento 2 中模态特征的事件

Intercept events on modal feature in Magento 2

modal-dialog

magento2