How to get call modal('closeModal') from authentication.html

Question

Question

How do I get access to the underlying modal object from a UiClass object?

This Magento Stackexchange answer shows how to call closeModal on a modal window:

https://magento.stackexchange.com/a/173972/89285

$("#popup-modal").modal("closeModal");

Information

The following files apply to my question:

vendor/magento/module-checkout/view/frontend/web
  -- js/view/authentication.js        
  -- template/authentication.html

Explanation and Issue

I have overridden and customized the checkout template and js files, and loaded correctly in the custom theme.

I want to add a link like this, with data-bind="click: doGuestCheckout" (which I define inside authentication.js

        doGuestCheckout: function () {
            fullScreenLoader.stopLoader();
// Here I want to call the modal('closeModal') method from the UiClass object once I have done all the other pre-processing.
        }

Debugging inside doGuestCheckout (or the built-in login function): this returns UiClass type

This is inside authentication.html template. This calls doGuestCheckout correctly, but I want to be able to call closeModal afterwards as explained above.

    <div class="actions-toolbar">
        <div class="primary">
            <a class="action action-register primary" href="#" data-bind="click: doGuestCheckout">
                <span data-bind="i18n: 'Checkout as Guest'"></span>
            </a>
        </div>
    </div>

I do not know how to find the underlying jquery modal object from this UiClass instance, so currently I made a button data-role="closeBtn" which then automatically calls the modal.js closeBtn function. This functionality is exactly as the authentication Login popup close button (and this 'custom button').

    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary" data-role="closeBtn" type="button">
                <span>Checkout as Guest</span>
            </button>
        </div>
    </div>

However, this is not ideal, as I cannot implement additional features before 'closing the modal form'.

In other words, when you click the authentication popup close button, eventually Magento_Ui/js/modal/modal.js::closeModal gets called when I put a breakpoint.

I want to be able to access the modal object from the UiClass inside authentication.js functions so that I am able to close the ui form after I am done.

Answer 1

You should be able to access to the modal class simply by selecting the element with jquery

The binding of the modal in authentication.html is on the element ".block-authentication", so a simple $(".block-authentication").modal("closeModal") should work.

EDIT from OP:

Thanks for this!

This was the way I ended up doing it, but at the time of writing the original question couldn't find the relevant selectors. What complicated things more was that the theme used has two popup modals with the same selector .block-authentication and they would counteract behaviour when hiding.

I ended up giving the relevant popups IDS where they were defined, for this relevant related to question:

Magento_Checkout::web/template/authentication.html

<div id="block-authentication-checkout-customer-modal-popup-content"
        class="block-authentication block-authentication-modal-popup-content" 

This ensures that custom behaviour while still showing for the relevant popups don't break.