Modal

Modals offer a lightweight, multi-purpose JavaScript popup that’s customizable and responsive. They can be used to display alert popups, videos, and images in a website. State Template is using Bootstrap-based modals which are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document.

To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:

Notice the button element has two custom data attributes: data-toggle and data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So, whenever a link button that is clicked, a modal with an ID of #modal will appear.

Example: