在使用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
