Magento – Cannot call methods on modal prior to initialization; attempted to call method ‘openModal’

jquerymagento2popup

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?

Best Answer

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