Description

A popup is a window that forces the user to interact with it before they can go back to using the parent application
A popup window may contain these elements:
- A colored header, including a title and a closing button
- A content area, which may contain text, inputs and controls
- A primary action button
- A secondary action button, if relevant

Types

Type	Usage	For more information
Message Popups	Display warnings, error messages and important information	See Message Popup
Dialogs	Collect information from users or allowing them to make decisions	See Dialog

Usage & Behaviour

General guidelines

The popup appears over a semi-transparent background
The popup is centered horizontally and vertically on the screen
The user cannot resize the width or height of a popup window
The user cannot move the popup across the screen
The semi-transparent background appears and disappears with a fade effect (TBD)
The popup window itself appears and disappears with a slide down / slide up effect (TBD)

Interaction

A popup window appears on users' action, usually clicking a button, icon or link
The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button. Clicking outside the window?
For interactions within dialog windows see Dialog

Validations and errors

Message popups do not involve special validations.
For validations and errors within dialog windows see Dialogs

Best practices

A popup window should carry a limited amount of content. If the content you wish to display is too extensive consider using other patterns
Avoid nested popups

Accessibility compliance

<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Zeplin link	Screen thumbnail
<<Zeplin Link>>	<<Screen with 200 width>>

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>