M2 Modal Widget - Variable for Link, Title, and Content

Question

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

    }
);

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

Answer 2

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.