...

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

...

For basic popup structure see Popups.
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 Removed

Image Added

Image Removed

Image Added

Placement and Positioning

...

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

Image Removed

Image Added

Design

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

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 64	New Version 65
Changes made by	Yehiel Elad-Certner	Yehiel Elad-Certner
Saved on	Dec 29, 2021	Dec 29, 2021

Content Comparison

Versions Compared

Key

Placement and Positioning

Design

Code