Nsryjdtyk

We are trying to develop a custom modal-popup on page load when cookie is not there.
Everything is fine except for the template. We copied and modified the template in our child-theme and the popup works great! However, our modifications on the template affected all of our previous modal-popups.

We want to extend the template to use it specifically in our modal-popup without affecting the other ones.

Let my show you,

this is the original template placed in: /vendor/magento/module-ui/view/base/web/templates/modal

<aside

class="modal-<%= data.type %> <%= data.modalClass %>

       <% if(data.responsive){ %><%= data.responsiveClass %><% } %>

       <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"

data-role="modal"

data-type="<%= data.type %>"

tabindex="0">

<div data-role="focusable-start" tabindex="0"></div>

<div class="modal-inner-wrap"

     data-role="focusable-scope">

    <header class="modal-header">

        <% if(data.title){ %>

        <h1 class="modal-title"

            data-role="title"><%= data.title %></h1>

        <% } %>

        <button

            class="action-close"

            data-role="closeBtn"

            type="button">

            <span><%= data.closeText %></span>

        </button>

    </header>

    <div

        class="modal-content"

        data-role="content"></div>

    <% if(data.buttons.length > 0){ %>

    <footer class="modal-footer">

        <% _.each(data.buttons, function(button) { %>

        <button

            class="<%= button.class %>"

            type="button"

            data-role="action"><span><%= button.text %></span></button>

        <% }); %>

    </footer>

    <% } %>

</div>

<div data-role="focusable-end" tabindex="0"></div>

and this is our modified template placed in: /app/design/frontend/{{vendor}}/{{child-theme}}/Magento_Ui/web/templates/modal

<aside

class="modal-<%= data.type %> <%= data.modalClass %>

       <% if(data.responsive){ %><%= data.responsiveClass %><% } %>

       <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"

data-role="modal"

data-type="<%= data.type %>"

tabindex="0">

<div data-role="focusable-start" tabindex="0"></div>

<div class="modal-inner-wrap <%= data.name %>"

data-role="focusable-scope">

    <div

        class="modal-content"

        data-role="content"></div>

    <div class="go-to-product-container">

        <a class="go-to-product" href="<%= data.buttonurl %>">Ir al producto</a>

    </div>

</div>

<div data-role="focusable-end" tabindex="0"></div>

We need to use our custom template without affecting the rest of the popups in the website. After so many searches on the internet, there's not explanations on how to extend a template / create a child template for modals on Magento 2.

I'll be eternally grateful if you guys can help me out with this.