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?

• Jaisa: Did you solved 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');