Cannot call methods on modal prior to initialization; attempted to call method 'openModal'

Question

This error is generated when i want to show popup when page load in magento2. Here I mentioned code of popup. In popupWidth and popupHeight there are height and width value store.

    require(['jquery','Magento_Ui/js/modal/modal'],function($,modal) 
{
        var options = 
        {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                slideshowSpeed: 8000,  
        };
        var popupWidth = $("#popupWidth").val();
        var popupHeight = $("#popupHeight").val();
        var popup = modal(options, $('#popup-modal'));

        $('#popup-modal').css("display","block");
        $('#popup-modal').modal('openModal');
        $("footer button").remove();
        $(".modal-footer").css("border-top","0");
        $(".modal-popup._inner-scroll .modal-inner-wrap").css("width", popupWidth);      
        $(".modal-popup._inner-scroll .modal-inner-wrap").css("height", popupHeight);
        function close()                     
        {
          $('#popup-modal').modal('closeModal');
        }
});

But it display cannot call methods on modal prior to initialization; attempted to call method 'openModal' this error message.

How to solve it?

Answer 1

Issue Fixes

<script type="text/javascript">
 require(['jquery','Magento_Ui/js/modal/modal'],function($,modal) 
{
        var options = 
        {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                slideshowSpeed: 8000,  
        };
        var popupWidth = $("#popupWidth").val();
        var popupHeight = $("#popupHeight").val();
        // Please remove the below line
        // var popup = modal(options, $('#popup-modal'));

        $('#popup-modal').css("display","block");
        // Use below the code and it will work
        $('#popup-modal').modal(options).modal('openModal');
        $("footer button").remove();
        $(".modal-footer").css("border-top","0");
        $(".modal-popup._inner-scroll .modal-inner-wrap").css("width", popupWidth);      
        $(".modal-popup._inner-scroll .modal-inner-wrap").css("height", popupHeight);
        function close()                     
        {
          $('#popup-modal').modal('closeModal');
        }
});

</script>

Simple Example

<script type="text/javascript">
    require([
            'jquery', 
            'Magento_Ui/js/modal/modal'
            ], function($, modal) {            
                $(document).ready(function(){  
                    var options = {
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        title: 'Page Title'
                    };              
                    $("#click-me").on('click',function(){                                                                               
                        $("#divID").modal(options).modal('openModal');
                    });
                    $('.modal-footer').hide();
                });
            }
        );
    </script>

Answer 2

Using below code I make my custom popup in magento2

<div id="your_popup_container" style="display:none">
    <p>your popup content</p>
</div>
<script type="text/javascript">
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                'type': 'popup',
                'title': 'your popup title',
                'modalClass': 'your_popup_custom_class',
                'responsive': true,
                'innerScroll': true,
                'buttons': [{
                    text: $.mage.__('Back'),
                    class: 'back_button_class',
                    click: function () {
                        this.closeModal();
                        // any javascript coode
                    }
                }]
            };

            $(document).ready(function(){
                var popup = modal(options, $('#your_popup_container')); 
                $("#your_popup_container").modal("openModal");
            });
        }
    );
</script>

Answer 3

Use this instead of initializing the modal separately.

$(MODAL_SELECTOR).modal(options).modal('openModal');