Here we are discussing how to create and call custom popup using Magento 2’s Popup Modal Library.

You should create a module first, then after create a requirejs-config.js file at app/code/CustomVendor/CustomModule/view/frontend/

var config = {
    paths: {            
         'myjs': "CustomVendor_CustomModule/js/customfile"
      },   
    shim: {
    'myjs': {
        deps: ['jquery']
    }
  }
}

var config = {

paths: {

'myjs': "CustomVendor_CustomModule/js/customfile"

shim: {

'myjs': {

deps: ['jquery']

}

You need to create customfile.js at app/code/CustomVendor/CustomModule/view/frontend/web/js/

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

            var popup = modal(options, $('#custompopup'));
            $("#click-here").on('click',function(){
                $("#custompopup").modal("openModal");
            });
        }
    );
</script>

require(

[

'jquery',

'Magento_Ui/js/modal/modal'

function(

modal

) {

var options = {

type: 'popup',

responsive: true,

innerScroll: true,

buttons: [{

text: $.mage.__('Continue'),

class: 'mymodal1',

click: function () {

this.closeModal();

}

}]

};

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

$("#click-here").on('click',function(){

$("#custompopup").modal("openModal");

});

}

);

</script>

Add following code in your phtml file:

<div data-mage-init='{"myjs": {}}'>
    <a href="#" id="click-here">Click Here</a>
</div>


<div id="custompopup" >
    This is custom popup using magento popup modal.
</div>

<a href="#" id="click-here">Click Here</a>

</div>

This is custom popup using magento popup modal.

</div>

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62866dff1de32811393611/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Magento Certified Developer

Hire V. Brahmbhatt

Fill the form & Get Installation Support

Magento 2: Creating and Calling Custom Popup using Modal

Recent Articles

Author Info

Get a Free Quote

Connect With Us