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

Question

I am making this model using javascript in magento 2. And its giving this error . dont know what is wrong with that It was working for few days.

<div id="custom-popup-modal">
<div class="col-sm-6">
<div class="static_content">
<h5 class="min-title-bold">JOIN THE PARTY</h5>
<h2 class="min-title-large">GET 15% OFF YOUR FIRST ORDER*</h2>
<p class="small-content">Subscribers only discounts, first look at new products, and cutting-edges tips</p>
{{block class="Magento\Newsletter\Block\Subscribe" name="static.newsletter" template="Magento_Newsletter::subscribe.phtml"}}
<p class="micro-text">*Promo code will be emailed to the address you enter, New subscribers only</p>
</div>
</div>
<div class="col-sm-6 img-section"><img src="{{media url="wysiwyg/image-email_1.gif"}}" alt="" /></div>
</div>
<script type="text/javascript" xml="space">// <![CDATA[
// 
// 
// 
    require(['jquery','Magento_Ui/js/modal/modal'],
        function($,modal) {
            var options = {
                type: 'popup',
                responsive: true,
            };
            var popup = modal(options, $('#custom-popup-modal'));
            $( document ).ready(function() {
                $('#custom-popup-modal').modal('openModal');
            });
        }
    );
// 
// 
// 
// ]]></script>

Will it work if you move `var popup =... ` to the line before `$('#custom-popup-modal').modal('openModal');` — Clayton Leis, Dec 05 '17 at 15:53

score 0 · Answer 1 · answered Nov 18 '22 at 00:01

This might be a similar issue: https://magento.stackexchange.com/questions/174029/cannot-call-methods-on-modal-prior-to-initialization-attempted-to-call-method

Solution:

Instead of the following in your code:

var popup = modal(options, $('#custom-popup-modal'));
$( document ).ready(function() {
    $('#custom-popup-modal').modal('openModal');
});

Use this:

$( document ).ready(function() {
    $('#custom-popup-modal').modal(options).modal('openModal');
});

Other Reference: jquery ui Dialog: cannot call methods on dialog prior to initialization

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

1 Answers1