6

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>
7

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
6

Different parameters can be used for Modal Popup creation by the reference of the file : vendor/magento/module-ui/view/base/web/js/modal/modal.js

<script>
require(['jquery','Magento_Ui/js/modal/modal'],
    function($,modal) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Popup',
            modalClass: 'see-detail-modal',
            buttons: [{
                text: $.mage.__('Close'),
                class: 'product-popup-hide',
                click: function () {
                    this.closeModal();
                }
            }]
        };

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.