0

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");
        });

    }
);
1

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>
  • You absolutely nailed it. Thank you so much for your help! – Sean Scott Jun 11 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 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 at 4:53

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.