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
Message Popups	To display warnings, error messages and important information.
Dialogs	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.

Placement and Positioning

The popup is centered horizontally on the screen.
The popup appears at 2/3 height of the screen.
The user will be able to move the popup around the screen.
The user cannot change the width or height of a popup window.

Content

The popup header may contain hard-coded text, a dynamic field, or a combination of both.

Interaction

A popup window usually appears as a results of a user action, such as clicking a button, icon, or link.
The popup can be closed by either clicking the close (X) button, or by clicking the primary or secondary action buttons.
Clicking outside of the popup will not close it.
For interactions within dialog boxes see Dialogs.

Validations and errors

Message popups do not require special validations.
See Dialogs for information on validations and errors for dialog popups.

Transitions

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

Use popups

to display important information. Remember that popups can be intrusive

Do not use popups

to display a large amount of content. In this case, link to help desk or, in case of a dialog, consider using a form.
for less important or unintrusive messages. In this case, consider using toasts

General

Keep the text short and informative.
Avoid nested popups.

Accessibility compliance

Follow the Accessibility guidelines, especially:

Design

Zeplin link	Screen thumbnail
https://zpl.io/bP6mg6V
https://zpl.io/VKOlj6V

Code

<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>