We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    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']
        }
      }
    }

    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>

    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>

     

    Fill the below form if you need any Magento relate help/advise/consulting.

    With Only Agency that provides a 24/7 emergency support.

      Get a Free Quote