How to implement a modal on a Skin

Updated by Valeria

Here you have a complete explanation of how to implement a modal in a skin.

In the Front End Editor, add the modal markup.

A modal is a user interface component that is often used to display additional content or perform specific actions without navigating to a new page.

Modals are typically displayed as a pop-up window that overlays the existing content on a web page.


The following HTML structure is expected for the modal to work

<!-- [1] —->
<button class="js-modal-action-open" data-modal-name="basic-modal">

<!-- [2] —->
<div class="c-box-modal js-modal" data-modal-name="basic-modal">
	<div class="c-box-modal__box">
<!-- [3] —->
<button type="button" title="close" aria-label="close" class="c-box-modal__close js-modal-action-close">
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g stroke="#000" stroke-linecap="square">
<path id="a" transform="translate(10.607 10.607) scale(-1 1) translate(-10.607 -10.607)" 
    d="m21.213 0-21.213 21.213"/>
<path d="m21.213 0-21.213 21.213"/>
</g>
</g>
</svg>
        </button>
        <div class="c-box-modal__box-inner"></div>
</div>

<!-- [4] —->
	<div class="c-box-modal__background js-modal-background"></div>
</div>
Legend

1 -> This button runs the modal. Make sure to indicate your target modal adding data-modal-name

2 -> This is the outermost container of the modal. Its job is to toggle the display of the modal. It is important that every modal has a unique data-modal-name. 

3 -> This button closes the modal.

4 ->This is the div which acts as the overlay background for the modal.

How did we do?