Foundation modal box

Foundation modal box

The modal box is a marble window that appears at the head of the page.

We can use a unique ID on a container element (e.g., <div id="myModal" and .reveal-modal and data-reveal to add modal boxes. W e can open the data-reveal-id=" id " attribute Ali. The id must be consistent with the container id (instance "myModal").

If you want to close the modal box by clicking on an area other than the modal box. You can do this by adding the <a> class to .close-reveal-modal and the label.

Note: The slider requires JavaScript. So you need to initialize the development JS:

Modal box size

The following classes can be added to the modal box container to set the size of the modal box:

• .tiny 30% width
• .small 40% width
• .medium 60% width
• .large 70% width
• .xlarge 95% width
• .full 100% width and height

Note: The default is 80% width on tablets, notebooks, and PCs, and 100% width on small-screen devices.

Inline modal boxes

You can embed modal boxes in modal boxes, and you can add new trigger buttons to the first modal box. You must set a unique id for the embedded modal box:

The second modal box replaces the first modal box. I f you want to open the second modal box, do not close the first modal box. Y ou can add data-options="multiple_opened:true;"