0

I have a 2 links on the product page which both need the modal popup component attaching to them, I have 1 working fine but If I try to add the same script for the 2nd one they both stop working

This is what I have for the first link:

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: false,
            innerScroll: true,
            buttons: []
        };

        var popup = modal(options, $('#finance-info'));
        $("#finance-popup").on('click',function(){ 
            $("#finance-info").modal("openModal");
        });

    }
);

For the second link I have:

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: false,
            innerScroll: true,
            buttons: []
        };

        var popup = modal(options, $('#information-mpdal'));
        $("#request-more").on('click',function(){ 
            $("#information-mpdal").modal("openModal");
        });

    }
);

Both of these scripts are in a custom.js file. Is it possible to have 2 modal popups on the same page?

3
  • There is no such restriction in the magento. You can add as many as JS widgets you want on the same page. Commented Sep 3, 2020 at 10:49
  • Are you getting any JS errors in console ? Commented Sep 3, 2020 at 10:51
  • Yes, I'm getting 'Cannot read property 'nodeName' of undefined'
    – Duggy G
    Commented Sep 3, 2020 at 11:11

2 Answers 2

1

I've fixed this, I didn't need to create 2 separate require.js calls for each modal, I just needed to create 2 variables in 1 call like this:

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function (
            $,
            modal
        ) {
            var modaloption = {
                type: 'popup',
                responsive: false,
                innerScroll: true,
                clickableOverlay: true,
                buttons: []
        };
        var popup = modal(modaloption, $('#information-mpdal'));
        $("#request-more").on('click',function(){ 
            $("#information-mpdal").modal("openModal");
        });
        var popup = modal(modaloption, $('#information-mpdal2'));
        $("#request-more2").on('click',function(){ 
            $("#information-mpdal2").modal("openModal");
        });
    }
);
</script>
0

This should be ok, there's no limit on modals per page and you're using distinct elements for each one.

I notice one of your modals has the node $('#information-mpdal'), is that a typo? It could explain "Cannot read property 'nodeName' of undefined" you mention in the comments.

1
  • No, that's not a typo, it's what the class is called for my popup content
    – Duggy G
    Commented Sep 4, 2020 at 15:51

Your Answer

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

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