Skip to content

Confirm Modal

The <confirm-modal> webcomponent is used to render a modal that dispatches events on cancellation and confirmation allowing to customize its behavior to a specific use case.

Usage with a custom body required to add an HTML element (any type, e.g. text, image, icon) with the slot attribute of no value. Such element will be displayed above the modal buttons.

Attributes

Attribute name Type Default Description
id string '' Unique identifier of the modal used also in the name attribute of the h-modal-opener
opened boolean false If set to true the modal will be initially opened
header string '' Header of the modal
confirmText string '' Text of the confirm button inside the modal
cancelText string '' Text of the cancel button inside the modal

DOM Events

The confirm-modal dispatches the following DOM Events:

Example

Twig
<h-modal-opener name="my-example-modal-123">
    <button class="btn btn_primary">Click here to open modal</button>
</h-modal-opener>
<confirm-modal
    id="my-example-modal-123"
    header="{{ translate('Are you sure you want to remove the product from your cart?') }}"
    confirmText="{{ translate('Remove product') }}"
    cancelText="{{ translate('Cancel') }}"
>
    <div class="hidden-xs-only" slot>
        My custom content
    </div>
</confirm-modal>
JS
useStorefront(async (storefront) => {
    const $confirmModal = document.querySelector('confirm-modal');

    $confirmModal.addEventListener('cancel', () => {
        console.log('Do something on modal cancellation');
    });

    $confirmModal.addEventListener('confirm', () => {
        console.log('Do something on modal confirmation');
    });
});

Webcomponents reference

Styles reference