The best Foundation modal box Tutorial In 2024, In this tutorial you can learn Modal box size,Embedded modal box,
Modal box is displayed in a page header pop.
We can be on a container element (such as <div id="myModal"
) uses a unique ID, and add .reveal-modal
classes and data-reveal
attribute to add the modal box. We can use on any element of data-reveal-id=" id "
" attribute Ali open modal box. id id must be consistent with the container (examples are "myModal").
If you want to click on the area outside the box to close the modal modal box. You can close button modal box <a>
add labels .close-reveal-modal
class.
Note: The slider requires JavaScript. So you need to initialize oundation JS:
You can add the following classes on 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 on the tablet, notebook, PC computers is 80% of the width on the small screen is 100% width.
You can embed the modal box in modal box, you can add a new trigger button on the first modal box. You must set a unique id for the embedded modal box:
The second modal box will replace the first modal box. If you want to open a second modal box without closing the first modal box. You can add on the second modal box data-options="multiple_opened:true;"
;" properties: