2

I want to have links that activate a modal window with dynamic content and title. I would assume there is a way to do this with variables. I can do it now as a separate script for each modal, but is there a way to make it dynamic?

Links:

<a href="#" id="click-header">Modal 1</a>
<a href="#" id="click-header">Modal 2</a>
<a href="#" id="click-header">Modal 3</a>
<a href="#" id="click-header">Modal 4</a>

Modal Content

<div id="header-mpdal" style="display:none;">
    <h3>TITLE 1</h3>
    <p>CONTENT CONTENT 1</p>
</div>
<div id="header-mpdal" style="display:none;">
    <h3>TITLE 2</h3>
    <p>CONTENT 2</p>
</div>
<div id="header-mpdal" style="display:none;">
    <h3>TITLE 3</h3>
    <p>CONTENT 3</p>
</div>
<div id="header-mpdal" style="display:none;">
    <h3>TITLE 4</h3>
    <p>CONTENT 4</p>
</div>

Javascript

require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Dynamic Title',
            buttons: [{
                text: $.mage.__('Ok'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

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

    }
);

2 Answers 2

4

Try following way:

<a href="#" data-modal-id="header-modal-1" class="click-header">Modal 1</a>
<a href="#" data-modal-id="header-modal-2" class="click-header">Modal 2</a>
<a href="#" data-modal-id="header-modal-3" class="click-header">Modal 3</a>
<a href="#" data-modal-id="header-modal-4" class="click-header">Modal 4</a>

<div id="header-modal-1" style="display:none;">
    <h3>TITLE 1</h3>
    <p>CONTENT CONTENT 1</p>
</div>
<div id="header-modal-2" style="display:none;">
    <h3>TITLE 2</h3>
    <p>CONTENT 2</p>
</div>
<div id="header-modal-3" style="display:none;">
    <h3>TITLE 3</h3>
    <p>CONTENT 3</p>
</div>
<div id="header-modal-4" style="display:none;">
    <h3>TITLE 4</h3>
    <p>CONTENT 4</p>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Dynamic Title',
                buttons: [{
                    text: $.mage.__('Ok'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            $(".click-header").on('click',function() {
                var dynamicTitle = $(this).html();
                options.title = dynamicTitle;
                var modalId = $(this).attr('data-modal-id');
                var popup = modal(options, $('#'+modalId));
                $('#'+modalId).modal("openModal");
            });

        }
    );

</script>
3
  • You absolutely nailed it. Thank you so much for your help!
    – Sean Scott
    Jun 11, 2019 at 17:33
  • Only 1 issue, when one of the modal pops is a video, the video does not stop playing when the close button is hit.
    – Sean Scott
    Jun 12, 2019 at 4:19
  • You need to add stop playing action in button click event. Ex. Now this.closeModal(); is there, you add other after that.
    – Sohel Rana
    Jun 12, 2019 at 4:53
0

Additional Info: There are also setters on the Magento 2 modal widget options. So you can do

$('#myModalId').modal('setTitle', 'The new title');

anywhere in your JS code, especially in the modal-opening click handler. Tested with Magento 2.4.6.

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.