Simple popup can be generated with magento 2 popup model
First, create a phtml to load the popup message and it should be added in footer section to load in every page
If you define the phtml in default.xml file then, simply you can call it as child component
<div class="note">
<div class="popup-open" ></div>
</div>
<div id="popup" style="display: none;">
<?php echo $this->getChildHtml('popup-content') ?>
</div>
<script type="text/x-magento-init">
{
".popup-open": {
"Vender_Module/js/popup": {}
}
}
</script>
OR
<div class="note">
<div class="popup-open" ></div>
</div>
<div id="popup" style="display: none;">
<?php echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('popup-content')
->toHtml(); ?>
</div>
<script type="text/x-magento-init">
{
".popup-open": {
"Vender_Module/js/popup": {}
}
}
</script>
Second, create popup js file to load the popup
define(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function($) {
"use strict";
//creating jquery widget
$.widget('Vender.Popup', {
options: {
modalForm: '#popup',
modalButton: '.popup-open'
},
_create: function() {
this.options.modalOption = this.getModalOptions();
this._bind();
},
getModalOptions: function() {
/** * Modal options */
var options = {
type: 'popup',
responsive: true,
clickableOverlay: false,
title: $.mage.__('Vender Notification'),
modalClass: 'popup',
buttons: [{
text: $.mage.__('Close'),
class: '',
click: function () {
this.closeModal();
}
}]
};
return options;
},
_bind: function(){
var modalOption = this.options.modalOption;
var modalForm = this.options.modalForm;
$(document).ready(function(){
$(modalForm).modal(modalOption);
$(modalForm).trigger('openModal');
});
}
});
return $.Vender.Popup;
}
);
Finally. create a cms block to add the popup content
Another way of creating popup
var options = {
type: 'popup',
responsive: true,
title: 'Main title',
buttons: [{
text: $.mage.__('Ok'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var previewPopup = $('<div/>').html('<h1>Testing</h1>');
previewPopup.modal(options).trigger('openModal');
Posted by vasan to vasan's deck (2020-03-23 13:58)