1

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?

  • Did you solved it?? – Jaisa Nov 29 '17 at 7:05
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>
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.