3

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?

1
  • Did you solved it??
    – Jaisa
    Nov 29, 2017 at 7:05

3 Answers 3

9

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>
4

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>
0

Use this instead of initializing the modal separately.

$(MODAL_SELECTOR).modal(options).modal('openModal');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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