AppStrap.

Modals are useful for displaying messages or content to users when they perform a certain action.

Setup

Modals are hidden by default and should be embed in your page using the following markup:

View code example

 
 
 
 
Modal title
  ×  
 
 
Modal body content...........
 
 
 Close Save changes 
 
 
 

---

Static Modal Example

---

Working Modal Example

Launch demo modal

---

Modal Sizing

Add .modal-sm or .modal-lg classes to the modal-dialog element to alter the size of the modals.

Large modal Small modal Fullscreen modal

---

Dismissing Modals

To allow users to dismiss a modal add a link or button with the attribute data-dismiss="modal" within the modal.

---

Timed Modals

To allow a modal to be opened for a specific duration (in milliseconds) and then have it close itself simply add a data-modal-duration="DURATION-IN-MILLISECONDS" attribute to the .modal element.

Launch demo timed modal

Also see modals onload.