0

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>
7
  • using module or theme ??
    – Rk Rathod
    Jan 28 at 7:43
  • no one custom module.@RkRathod Jan 28 at 8:01
  • Please try => theme/Magento_Ui/web/templates/modal/modal-popup.html also setup upgrade and content deploy Jan 28 at 9:03
  • I have added answer. Please check. Please let me know if you have any query. After that please approve my answer and upvote this.
    – ZealousWeb
    Feb 12 at 7:02
  • Thanks for reply your answer but my issue solved now.@ZealousWeb Feb 12 at 11:22
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.

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.