当前位置: 首页>>建站开发>>正文


如何在magento2中创建表单popup-modal

webfans 建站开发 , , , 去评论

问题描述

我是magento2的新手。我正在尝试为我的新表单创建一个popup-modal。我创建了一个工作正常但无法创建模态的弹出窗口。

以下是加载页面加载的弹出窗口代码 –

require([
        'jquery',
        'Magento_Ui/js/modal/alert'
    ],
    function($, alert) {
       alert({
            title: "Some title",
            content: "we can show popuop based on cookies later",
            autoOpen: true,
            clickableOverlay: false,
            focus: "",
            actions: {
                always: function(){
                    console.log("modal closed");
                }
            }
        });
    }
);

请帮我创建一个模态。任何帮助都非常感谢。

最佳解决思路


<div id="popup-modal">
    <h1> Hi I'm here.... </h1>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup modal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));

            $('#popup-modal').modal('openModal');
        }
    );
</script>

次佳解决思路

您需要使用Magento_Ui /js /modal /modal小部件。在Official Documentation中查看更多详细信息示例:

require([
    'jquery',
    'jquery/ui',
    'Magento_Ui/js/modal/modal'
], function($){
     $('<div />').html('Modal Window Content')
        .modal({
            title: 'My Title',
            autoOpen: true,
            closed: function () {
                // on close
            },
            buttons: [{
                text: 'Confirm',
                attr: {
                    'data-action': 'confirm'
                },
                'class': 'action-primary',
                click: clickCallback
            }]
         });
});

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2408.html,转载请务必附带本地址声明。