Set custom class for Modal popup Magento 2

Question

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>

Answer 1

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

Answer 2

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>

Answer 3

Go to your script code and add one line code: modalClass: 'question-modal' check below script.

    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                modalClass: 'question-modal',
                buttons: []
            };

            var popup = modal(options, $('#question-popup'));
            $("#question-me").on('click',function(){
                $("#question-popup").modal("openModal");
            });

        }
    );