BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Overlay

Overview

  • • Overlays are modal, sitting on top of a main window and disabling the grayed-out main window content until the user closes the message.
  • • Overlays may be used to interrupt the user with messages too important to miss or to get needed input from the user.
  • • Overlays have content container widths that are responsive as the viewport shrinks, and become full-screen takeovers below 768px.

Overlay Message

 

Click here to open a overlay window without a scrollbar.

Message Header

This is the default dialog which is useful for displaying any portal level alert information. The dialog window can be closed with the 'x' icon or CLOSE button.

Click here to open a overlay window with a scrollbar.

Message Header

This is the default dialog which is useful for displaying any portal level alert information. The dialog window can be closed with the 'x' icon or CLOSE button.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus massa velit. In ullamcorper dolor et enim dapibus, nec porttitor dui porttitor. Aenean volutpat arcu sed tempus euismod. Nam vel erat id turpis eleifend elementum. Phasellus turpis ligula, vehicula in lobortis eget, feugiat non ex. Integer ultricies dui vel dui finibus, id imperdiet nisl tristique. Ut ac libero a elit interdum sollicitudin quis et magna. Ut at euismod augue. Etiam sit amet justo vel metus vulputate pulvinar a at turpis. Donec a urna ut tortor mollis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi vitae tellus sit amet erat tristique dignissim. Sed a finibus tellus, sed aliquet justo. Mauris consectetur finibus imperdiet.

Nullam non ipsum iaculis, placerat nibh vitae, lobortis lorem. Donec dictum vulputate mauris. Mauris eget mi non magna lobortis convallis. Mauris tortor nibh, ultrices nec mattis ut, fermentum in quam. Morbi blandit metus tortor, nec sollicitudin nisl efficitur sit amet. Mauris vitae mattis nisl. Vivamus luctus non felis non ullamcorper. Integer pulvinar vestibulum lacus, ac sagittis ligula gravida quis. In a velit lorem. Aliquam eu sem ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque felis est, tincidunt at iaculis non, fermentum vel diam. Nulla facilisi. Nam dictum orci vel ligula fringilla viverra. In blandit justo nec molestie auctor. Ut pretium odio quis porta pellentesque.

Cras ut ornare mauris. Vivamus sodales velit quis finibus efficitur. Vivamus semper felis ut urna ultrices, vitae tristique urna rhoncus. Proin vehicula quis sapien sit amet hendrerit. Integer commodo at risus rhoncus tincidunt. In dictum, tortor at tristique mollis, mauris massa vulputate odio, nec ultrices quam turpis vitae nisi. Quisque fermentum aliquam nibh, a tincidunt ex placerat non. Vestibulum lectus urna, sollicitudin eu fringilla in, consectetur sed neque. Vestibulum aliquet velit eu nisi tincidunt rhoncus. In hac habitasse platea dictumst. Suspendisse venenatis, odio id bibendum vehicula, velit leo consectetur ante, et dictum enim sem eu tellus. Integer at ante porta, aliquam arcu nec, tincidunt nunc. Phasellus porta dolor ut ipsum gravida pharetra. Suspendisse pulvinar dui a rhoncus mollis.

Sample desktop view only. Not to scale.

overlay

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip
  • Download Associated Jquery-modal Files:Zip


Hide Show CSS
                         
 .blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}
.blocker:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}
.blocker.behind {
	background-color: transparent;
}
.ml-lightbox-container {
	display: none;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	min-height: 250px;
	max-height: 650px;
	max-width: 750px;
	box-sizing: border-box;
	width: 90%;
	background: #f2f2f2;
	padding: 25px 40px 30px 40px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	-ms-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	text-align: left;
}
.modal a.close-modal {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(/assets/patterns/img/modal/close-icon.svg);
}
.modal a.close-modal:hover {
	background-image: url(/assets/patterns/img/modal/close-icon-hover.svg);
}
.modal-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #111;
	height: 20px;
}
.modal-spinner > div {
	border-radius: 100px;
	background-color: #fff;
	height: 20px;
	width: 2px;
	margin: 0 1px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.modal-spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.modal-spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.modal-spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}


@media screen and (max-width: 768px) {
	.header-small {
	font-size: 22px;
	font-size: 1.375rem;
}
	
	.blocker {
	padding: 0px;
	
}
	
	.ml-lightbox-container {
	display: none;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	max-height: 100%;
	background: #f2f2f2;
	padding: 20px 15px 20px 15px;
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow:none;
	text-align: left;
}
.align-right{
	text-align: center;
	
}

.ml-button-primary {
	width:270px;
	text-align:center;
	
}
	
}



        
        
                            
HideShow HTML
                                                

<!--Model Window Trigger-->
<div> <a href="#ex1" rel="modal:open" class="mlpl-type-strong-link">Click here</a> to open a message. </div><br><br>

<!--Model Window Container-->

<div class="ml-lightbox-container" id="ex1">

<h1 class="header-small align-center"> Message Header </h1>
<p class="align-left">This is the default dialog which is useful for displaying any portal level alert information. The dialog window can be closed with the 'x' icon or CLOSE button. </p><br><br><br><br>

<div class="align-right"><a href="#" rel="modal:close" class="ml-button-primary">Close Window</a></div>
</div>
</div>

<!-- ======== script ======== -->

<script>
$('.ml-msg-close').click(function () {
$(this).parent().hide('fast', function(){ $(this).remove(); });
});
</script>