系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在 Magento 2 中，模态框是一种常用的 UI 组件，它可以在当前页面上显示一个弹出窗口，通常用于显示重要的消息、警告、确认框等。在 Magento 2 中，可以使用 Modal 组件来创建模态框。
以下是一个示例代码，展示如何在 Magento 2 中使用 Modal 组件创建模态框。
<modal id="example-modal"> <header> <h2 class="modal-title">Example Modal</h2> </header> <content> <p>Content goes here...</p> </content> <footer> <button class="action-primary" type="button" data-role="close">Close</button> </footer> </modal>
在上面的示例中，<modal> 标签用于创建模态框。id 属性指定了模态框的唯一标识符。在 <header> 标签中，我们定义了模态框的标题。在 <content> 标签中，我们定义了模态框的内容。在 <footer> 标签中，我们定义了模态框的底部按钮，这里是一个 “Close” 按钮，通过 data-role="close" 属性来关闭模态框。
在 Magento 2 中，可以通过 JavaScript 代码来打开模态框。例如，以下代码演示如何通过点击按钮来打开上面定义的模态框。
require([
'jquery',
'Magento_Ui/js/modal/modal'
], function($, modal) {
var options = {
type: 'popup',
responsive: true,
title: 'Example Modal',
buttons: [{
text: $.mage.__('Close'),
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#example-modal'));
$('#open-modal-button').on('click', function() {
popup.openModal();
});
});在上面的代码中，我们首先加载了 jQuery 库和 Magento_Ui/js/modal/modal 模块。然后，我们定义了一个包含模态框属性的对象。在这里，我们将 type 属性设置为 popup，将 responsive 属性设置为 true，这样可以使模态框在不同大小的屏幕上呈现良好的响应式布局。我们还定义了一个按钮，当点击时可以关闭模态框。最后，我们通过 modal() 函数创建了一个 Modal 对象，将其绑定到 #example-modal 元素上，并通过 openModal() 方法打开模态框。