Magento 2 Modal Popup – Uncaught Error: Cannot Call Methods on Modal Prior to Initialization

magento2modal-popup

I am getting error when I am calling modal like this

setTimeout(function() { $('#site-pop-up').modal('show'); }, 2000);

Error in console:

Uncaught Error: cannot call methods on modal prior to initialization; attempted to call method 'show'

Anyone have solution for this?

Thanks

Best Answer

Add your code in require so that it will execute with jquery and modal is ready

require([
    'jquery',
    'Magento_Ui/js/modal/modal'
], function($){
    setTimeout(function() {
        jQuery('#site-pop-up').modal('show');
    }, 2000);
});

Related Solutions

Magento 2 – Fix Fatal Error: Uncaught Error: Call to a Member Function Dispatch

It's because your constructor does not match the parent block constructor. (the ... in my answer you linked are important).

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Magento\Store\Model\Information $storeInfo,
    array $data = []
)
{        
    $this->_storeInfo = $storeInfo;
    parent::__construct($context, $data);
}

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

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>

Best Answer

Related Solutions

Magento 2 – Fix Fatal Error: Uncaught Error: Call to a Member Function Dispatch

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

Related Topic