2

I want to set background color in whole modal. How to do it..?

Please help me...

See the below code....

    <div id="popup-modal" class="abc">
<p>A</p>
</div>
<style type="text/css">
    .modal-popup._inner-scroll .modal-inner-wrap
    {
        top: 20%;
    }
    .modal-slide._inner-scroll .modal-content
    {
        overflow-x: hidden;
    }
    .abc
    {
        display: none;
    }
}​
</style>

<script type="text/javascript">
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],

        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                slideshowSpeed: 8000,

                //title: 'popup modal title',
                /*buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
*/            };

            setTimeout(function () {

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

            $('#popup-modal').modal('openModal');
            $(".modal-footer").css("border-top","0");
            $(".modal-popup._inner-scroll .modal-inner-wrap").css("width", 700);
        }, 1000 );

        });


</script>

1 Answer 1

4

try this

$('.modal-popup._inner-scroll .modal-inner-wrap').css('background-color','black');

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],

    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            slideshowSpeed: 8000,

            //title: 'popup modal title',
            /*buttons: [{
                text: $.mage.__('Continue'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
    */  };

        setTimeout(function () {

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

        $('#popup-modal').modal('openModal');
        $(".modal-footer").css("border-top","0");
        $('.modal-popup._inner-scroll .modal-inner-wrap').css('background-color','black');
    }, 1000 );

    });
3
  • and what is the option for the popup size ? Nov 6, 2017 at 9:37
  • 2
    @LachezarRaychev $('.modal-popup._inner-scroll .modal-inner-wrap').css('width','450px');
    – Mehdi
    Nov 28, 2017 at 16:21
  • no property in options for that ? ? Nov 29, 2017 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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