Related Pages: Message Popups, Dialogs
...
| Table of Contents |
|---|
Description
A popup is a window which appears over the primary screen. It usually appears as a result of a user action, such as clicking a help icon. A popup must be dismissed by the user before returning to the primary screen.
Types
Type | Usage | Example |
|---|---|---|
To display warnings, error messages and important information. |  | |
To collect information from the user, or to allow them to make decisions. |  |
Usage & Behavior
General guidelines
Structure
A popup window may contain:
A colored header, including:
a title.
a close button (X).
A content area, which may contain text, inputs and controls.
Buttons, including:
a primary action button.
a secondary action button, if relevant.
other action buttons, if relevant.
The popup appears over a semi-transparent background.
...
The semi-transparent background will appear and disappear with a fade effect (TBD)
The popup window itself will appear and disappear with a slide down / slide up effect (TBD)
Best practices
Do not use a large amount of content, and keep text concise. Where a lot of content is needed, consider using another pattern.
Avoid nested popups.
...
Zeplin link | Screen thumbnail | <<Zeplin Link>> | <<Screen with 200 width>>|
|---|---|---|---|
 | |||
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Popup <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#regularModal">Regular Popup</button>
<!-- Modal -->
<div class="modal fade" id="regularModal" tabindex="-1" role="dialog" aria-labelledby="regularModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="regularModalLabel">Popup Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popup Main Header</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
<form>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Morbi in faucibus lorem</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Aliquam sollicitudin</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio3">Curabitur volutpat nunc non magna</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio4">Nullam sed nunc auctor</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#regularModal">Regular Popup</button>
<!-- Modal -->
<div class="modal fade" id="regularModal" tabindex="-1" role="dialog" aria-labelledby="regularModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="regularModalLabel">Popup Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popup Main Header</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
<form>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Morbi in faucibus lorem</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Aliquam sollicitudin</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio3">Curabitur volutpat nunc non magna</label>
</div>
<div class="custom-control custom-control-sm custom-radio">
<input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio4">Nullam sed nunc auctor</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Narrow Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#narrowModal">Narrow Popup</button>
<!-- Modal -->
<div class="modal fade" id="narrowModal" tabindex="-1" role="dialog" aria-labelledby="narrowModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="narrowModalLabel">Popup Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popup Main Header</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#narrowModal">Narrow Popup</button>
<!-- Modal -->
<div class="modal fade" id="narrowModal" tabindex="-1" role="dialog" aria-labelledby="narrowModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="narrowModalLabel">Popup Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popup Main Header</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
</div>
</div> |
...