Dialogs are used to prompt a user for information or for some kind of input. Dialogs will typically be used when a large amount of the screen needs to be taken over with the view. A dialog will typically pertain to the entire application as opposed to being used for something like info about a record that can be a contextual popover. Dialogs wil always contain a quick easy way to close. When a dialog is presented, any changes made within the dialog will need to be confirmed before saved.
Alert are used to notify a user of some type of important information or confirmation that needs to be in their face. An alert will always require user input to dismiss, such as confirming the execution of an action or simply saying ok to verify a user has read a message. Alerts are always displayed over a shaded background and appear above all other content within a view .Alerts maintain a constant width, but can grow taller based on the amount of content in them. The buttons of an alert will always take up the maximum width of the bottom row if there are one or two, but if more they will stack vertically taking up the maximum width.
Confirmational alerts are used to get user input before an action takes place. The user has the ability to either continue with the action or cancel it.
<button data-target="#alert1" class="btn btn-default" data-toggle="modal">Confirm Alert</button>
<div id="alert1" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="modal1_title">
<div class="modal-dialog modal-sm modal-alert">
<div class="modal-content">
<header class="modal-header">
<h4 id="modal1_title" class="modal-title">Confirm Alert</h4>
</header>
<div class="modal-body">
<p>Something happened and it's really not good. Do you want to continue?</p>
</div>
<footer class="modal-footer flex">
<button data-dismiss="modal" class="btn btn-default">Cancel</button>
<button data-dismiss="modal" class="btn btn-primary">OK</button>
</footer>
</div>
</div>
</div>
Negative alerts behave just like confirmational alerts, with the exception that they are reserved for negative actions such as delete or remove.
<button data-target="#alert2" class="btn btn-default" data-toggle="modal">Delete Alert</button>
<div id="alert2" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="alert2_title">
<div class="modal-dialog modal-sm modal-alert">
<div class="modal-content">
<header class="modal-header">
<h4 id="alert2_title" class="modal-title">Delete Alert</h4>
</header>
<div class="modal-body">
<p>Are you sure you want to delete record INC000101?</p>
</div>
<footer class="modal-footer flex">
<button data-dismiss="modal" class="btn btn-default">Cancel</button>
<button data-dismiss="modal" class="btn btn-danger">Delete</button>
</footer>
</div>
</div>
</div>
Informational alerts are used to notify a user of important information. This type of Alert is used when you need to verify that a user has read the message. The alert will only have a single button used to verify confirmation. The button will span the entire width of the alert and typically say something such as, “OK.”
<button data-target="#alert3" class="btn btn-default" data-toggle="modal">Info Alert</button>
<div id="alert3" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="alert3_title">
<div class="modal-dialog modal-sm modal-alert">
<div class="modal-content">
<header class="modal-header">
<h4 id="alert3_title" class="modal-title">Info Alert</h4>
</header>
<div class="modal-body">
<p>Just letting you know that something happened. Nothing to worry about...</p>
</div>
<footer class="modal-footer flex">
<button data-dismiss="modal" class="btn btn-primary">OK</button>
</footer>
</div>
</div>
</div>
<button data-target="#alert3" class="btn btn-default" data-toggle="modal">Long Info Alert</button>
<div id="alert4" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="alert4_title">
<div class="modal-dialog modal-sm modal-alert">
<div class="modal-content">
<header class="modal-header">
<h4 id="alert4_title" class="modal-title">Long Info Alert</h4>
</header>
<div class="modal-body">
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
</div>
<footer class="modal-footer flex">
<button data-dismiss="modal" class="btn btn-primary">OK</button>
</footer>
</div>
</div>
</div>
<button data-target="#small_modal1" class="btn btn-default" data-toggle="modal"> Open Small Modal</button>
<div id="small_modal1" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="small_modal1_title">
<div class="modal-dialog">
<div class="modal-content">
<header class="modal-header">
<button data-dismiss="modal" class="btn-icon close icon-cross">
<span class="sr-only">Close</span>
</button>
<h4 id="small_modal1_title" class="modal-title">Plugin Activation</h4>
</header>
<div class="modal-body">
<span class="icon-invalid">Failure</span>
<p>com.glideapp.survey_wizard was not activated</p>
</div>
<footer class="modal-footer">
<button class="btn btn-default">View Plugin</button>
<button class="btn btn-default">View Logs</button>
</footer>
</div>
</div>
</div>
<button data-target="#large_modal1" class="btn btn-default" data-toggle="modal"> Modal with Title</button>
<div id="large_modal1" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="large_modal1_title">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<header class="modal-header">
<button data-dismiss="modal" class="btn-icon close icon-cross">
<span class="sr-only">Close</span>
</button>
<h4 id="large_modal1_title" class="modal-title">Modal Title</h4>
</header>
<div class="modal-body">
<span class="icon-invalid">Failure</span>
<p>com.glideapp.survey_wizard was not activated</p>
</div>
</div>
</div>
</div>
<button data-target="#large_modal2" class="btn btn-default" data-toggle="modal"> Modal with Title and Link</button>
<div id="large_modal2" tabindex="-1" aria-hidden="true" class="modal" role="dialog" aria-labelledby="large_modal2_title">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<header class="modal-header">
<button data-dismiss="modal" class="btn-icon close icon-cross">
<span class="sr-only">Close</span>
</button>
<h4 id="large_modal2_title" class="modal-title">
<a href="#">INC12456</a> - Modal Title
</h4>
</header>
<div class="modal-body">
<span class="icon-invalid">Failure</span>
<p>com.glideapp.survey_wizard was not activated</p>
</div>
</div>
</div>
</div>