Magento 2 – How to Set Custom Class for Modal Popup

magento2modalpopup

I have different popups and each popup has different styles, Anyone know how I can restyle each Modal by adding custom class or something.

Here one of my modal popup code:

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

            $(".btn_open").click(function() {

                $(".popup_content").modal(options).modal('openModal');

            });
        }
    );
</script>

<span class="btn_open">Get first popup</span>
<div class="popup_content">First popup content</div>

Best Answer

You could use "modalClass" to set a particular class for each modal. See all of the possible modal paremeters in the following file:

 vendor/magento/module-ui/view/base/web/js/modal/modal.js

Related Solutions

Magento-2.1 – How to Create Popup Modal

Try this

success: function(data)
   {
    //events_popup is you popup id
       $('#events_popup').modal('closeModal');
   }

This is your final answer

<div id="events_popup" style="display: none;" class="events_popup">
<script type="text/javascript">
require(
    [
        'jquery'

    ],
    function($,modal)
    {
        $("#<?php echo $_product->getId()?>").submit(function(e) {
            $.ajax({
                   type: "POST",
                   url:  $(this).attr('action'),
                   data: $("#<?php echo $_product->getId()?>").serialize(), 
                   showLoader: true,
                   success: function(data)
                   {
                       //events_popup is you popup id
                       $('#events_popup').modal('closeModal');
                   }
                 });
            e.preventDefault(); 
        });

    }
); 
</script>

Magento 2 – JS Modal Popup Close Event

You don't have to extend the modal.

You simply have to listen for the 'modalclosed' event on the DOM element on which the modal had been invoked. In fact the modal() function returns this element which makes the code trivial.

$('#popup-modal').on('modalclosed', function() { 
  /*insert code here*/ 
});

Best Answer

Related Solutions

Magento-2.1 – How to Create Popup Modal

Magento 2 – JS Modal Popup Close Event

Related Topic