在使用Magento 2时，我们试图利用Magento支持的所有实用程序，以避免不得不重新修改现有功能，这会导致时间和精力的浪费。
在本文中，我将解释如何在Magento 2中创建和调用模式弹出窗口小部件。

首先，我们有一个按钮。单击它将显示一个弹出窗口。

<button id="modal-btn">Open Modal</button>

<div id="modal-content">
    <div class="modal-inner-content">
        <h2>Modal Title</h2>
        <p>Modal content.....</p>
    </div>
</div>

使用Magento 2小部件

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) { 
            // Your JS
        }
    );
</script>

组件参数设置：

var options = {
        type: 'popup',
        responsive: true,
      innerScroll: true,
        title: 'Pop-up title',
      buttons: [{
         text: $.mage.__('Close'),
         class: 'modal-close',
         click: function (){
             this.closeModal();
         }
        }]
};

最终的js

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Pop-up title',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: 'modal-close',
                    click: function (){
                        this.closeModal();
                    }
                }]
            };

            modal(options, $('#modal-content'));
            $("#modal-btn").on('click',function(){
                $("#modal-content").modal("openModal");
            });
        }
    );
</script>

点击button的结果

image.png