A message popup is a Popup containing important information such as a warning, error message, or help text.

Types

Type	Usage	Image
Warning	A warning message informs the user about a potential problem, particularly one that could occur if the user continues with an action.	Image Modified
Error	An error message informs the user about an error that has occurred.	Image Modified
Information	An information message contains additional information relevant to the primary screen.	Image Modified
Help	A help message contains an explanation of any content relevant to the primary screen.	Image Modified

Usage & Behavior

General guidelines

...

For basic popup structure see Popups.
A message popup will have a title, next to a type icon (e.g. warning icon).
The message popup may contain a checkbox, allowing the user to declare a statement, e.g. I understand or Don’t show this again.

Image Modified

Dimensions

Message popup have three possible dimensions: small, medium and large, depending on the amount of content.
A small popup has a fixed width of 400px.
In this case, the height of the popup may vary from 260px to 460px.
A medium popup has a fixed of 500 px.
In this case, the height of the popup may vary from 325px to 575px.
A large popup has a fixed width of 600 px.
In this case, the height of the popup may vary from 390px to 690px.
If the content does not fit within the content arealargest popup size, a scrollbar will appear.

Small popup	Medium popup	Large popup
Image Modified	Image Modified	Image Modified

Content

Popup header will contain the name of the object that triggered it (see Popups for more information).
The title can wrap up to two lines. Beyond that it will be truncated, showing an ellipsis (…). In this case, hovering over the title will show a tooltip with the full title.

...

A message popup is very intrusive. Use it only for important messages or long help messages. For lower-priority messages use a Toast.
Keep the title short and informative. The title should not include the actual name of the entity.
Keep the message text short and informative.
A common use is when the user tries to leave a page without saving their work. In this case, a warning popup will appear:

...

Design

Zeplin link	Screen thumbnail
https://zpl.io/bP6mg6V	Image Modified

Code

Html macro

sanitize	false

<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">Messaging 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">Help Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#helpModal">Help Message</button>
						<!-- Modal -->
						<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-help" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="helpModalLabel">Help</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<h5><i class="icon-message-status-help"></i> Help Title</h5>
										<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
									</div>
									<div class="modal-footer">
										<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="#helpModal">Help Message</button>
<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-help" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="helpModalLabel">Help</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <h5><i class="icon-message-status-help"></i> Help Title</h5>
            <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
         </div>
         <div class="modal-footer">
            <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">Information Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#infoModal">Information Message</button>
						<!-- Modal -->
						<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-info" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="infoModalLabel">Informative</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<h5><i class="icon-message-status-info"></i> Informative Title</h5>
										<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
									</div>
									<div class="modal-footer">
										<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="#infoModal">Information Message</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-info" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="infoModalLabel">Informative</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <h5><i class="icon-message-status-info"></i> Informative Title</h5>
            <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
         </div>
         <div class="modal-footer">
            <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">Warning Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#warningModal">Warning Message</button>
						<!-- Modal -->
						<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-warning" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="warningModalLabel">Warning</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<h5><i class="icon-message-status-warning"></i> Warning Title</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="#warningModal">Warning Message</button>
<!-- Modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-warning" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="warningModalLabel">Warning</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <h5><i class="icon-message-status-warning"></i> Warning Title</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 class="form-group row">
					<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#errorModal">Error Message</button>
						<!-- Modal -->
						<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-error" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="errorModalLabel">Error</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<h5><i class="icon-status-message-error"></i> Error Title</h5>
										<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
									</div>
									<div class="modal-footer">
										<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="#errorModal">Error Message</button>
<!-- Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-error" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="errorModalLabel">Error</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <h5><i class="icon-status-message-error"></i> Error Title</h5>
            <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
         </div>
         <div class="modal-footer">
            <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>

...

Version	Old Version 73	New Version 74
Changes made by	Liav Nadler	Asaf Ben-Oved
Saved on	Aug 15, 2023	Feb 26, 2024

Content Comparison

Versions Compared

Key

Types

Usage & Behavior

General guidelines

Dimensions

Content

Design

Code