How to override model-popup.html magento 2.4.0

Question

How to override modal-popup.html h1 tag replace span tag.

vendor/magento/module-ui/view/base/web/templates/modal/modal-popup.html

        <h1 id="modal-title-<%- data.id %>" class="modal-title"
            data-role="title">
            <% if(data.title){ %>
                <%= data.title %>
            <% } %>

            <% if(data.subTitle){ %>
            <span class="modal-subtitle"
                  data-role="subTitle">
                <%= data.subTitle %>
            </span>
            <% } %>
        </h1>

Answer 1

You don't need to override it , but you can call your custom modal-popup.html file for your pop up.

Below is the code for creating pop up. I have called my custom modal-popup.html in js code.

<div>
    <a href="#" id="click-me">Click Me</a>
</div>

<div id="popup-mpdal" >
    <span>Test</span>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal',
            'text!PackageName_Module/template/modal/modal-popup.html'
        ],
        function(
            $,
            modal,
            popupTpl
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                popupTpl: popupTpl,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

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

        }
    );
</script>

==========================================================================

Now, please create modal-popup.html file under path PackageName/Module/view/frontend/web/template/modal/

Copy paste code from core file (vendor/magento/module-ui/view/base/web/templates/modal/modal-popup.html)

And now you can replace any tag in your custom modal-popup.html file as per your need.

After that please run below commands to show changes on front end.

bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento cache:flush
chmod -Rf 0777 var/ generated/ pub/ 

Please check and let me know if you have any query.