Modal - Basic Style

When to Use

Modals should only be needed when we need the users full attention on something.

Functionality

Each modal has at least one button to allow closing or continuation. Aside from that there is an "X" in the top right corner that the users can return to the page under the modal.

Rendered Code

Open the Modal

HTML

		
			Request Prior Authorization
		

		
		  Success!
			Request for Prior Authorization for:
			Jane Doe
			11/12/1974

			Has been sent to:
			
				Blue Cross and Blue Shield of Texas (BCBSTX)

				Phone: 800-451-0287

				Fax: 972-766-0371
			

			The approximate turnaround time is 24-72 hours after initiation with the insurance company. The insurer will send you the Prior Authorization status via fax.

			
				View Patient
			
		  ×

CSS

		.reveal-modal-bg {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			background: #000;
			display: none;
			filter: alpha(opacity=80);
			height: 100%;
			left: 0;
			opacity: .8;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
		}

		.reveal-modal {
			-moz-border-radius: 5px;
			-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			-webkit-border-radius: 5px;
			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			background: #fff;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			left: 50%;
			margin-left: -250px;
			padding: 30px 40px 34px;
			position: absolute;
			top: 100px;
			visibility: hidden;
			width: 520px;
			z-index: 101;
		}

		.reveal-modal .close-reveal-modal {
			color: #aaa;
			cursor: pointer;
			font-size: 22px;
			font-weight: bold;
			line-height: .5;
			position: absolute;
			right: 11px;
			text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
			top: 8px;
		}

		.reveal-modal .center_button {	margin-top: 20px }
		.reveal-modal .center_button .btn {	 margin-top: 22px }
		.reveal-modal h4 {
			font-size: 14px;
			text-transform: uppercase;
		}

		.reveal-modal h1 {	margin-bottom: 35px }
		.reveal-modal p {	 margin: 10px 0 2px 0 }
		.list-modal {	 font-size: 25px }
		.list-modal .fa-check-circle {	color: #5C9922 }
		.list-modal .loading {
			left: -5px;
			margin-right: 5px;
			position: relative;
			top: 10px;
		}

		.list-modal .fa {
			font-size: 36px;
			margin-right: 13px;
			position: relative;
			top: 4px;
		}

		.reveal-modal.small {
			margin-left: -140px;
			width: 200px;
		}

		.reveal-modal.medium {
			margin-left: -240px;
			width: 400px;
		}

		.reveal-modal.large {
			margin-left: -340px;
			width: 600px;
		}

		.reveal-modal.xlarge {
			margin-left: -440px;
			width: 800px;
		}

JavaScript

		$('a[data-reveal-id]').on('click', function () {
		  var id = $(this).attr('data-reveal-id');
		  $("#" + id).reveal('open');
		  return false;
		});

Modal - Modal Sizes

When to Use

Modals can take on other sizes. We recommend sticking to the defaults unless a different modal is necessary.

Functionality

Adding a class to the modal controls different sizes.

Rendered Code

.small .medium .large

HTML


		
			Small Modal
			This is small modal. It takes up 40% of the screen.

			
				Button
			
		

	  	×
	

	
		
			Medium Modal
			This is medium modal. It takes up 60% of the screen.

			
				Button
			
		

	  	×
		

	
		
			Large Modal
			This is large modal. It takes up 70% of the screen.

			
				Button

CSS

.reveal-modal.small {
  width: 40%;
}

.reveal-modal.medium {
  width: 60%;
}

.reveal-modal.large {
  width: 70%;
}

.reveal-modal.xlarge {
  width: 95%;
}

.reveal-modal.full {
  width: 100%;
  top: 0;
  min-height: 100vh;
  max-width: none !important;
  height: 100%;
  height: 100vh;
}

JavaScript

		$('a[data-reveal-id]').on('click', function () {
		  var id = $(this).attr('data-reveal-id');
		  $("#" + id).reveal('open');
		  return false;
		});

Modal - Warning

When to Use

Warning modals are used to confirm the user intends to continue with their action.

Functionality

Warning modals present the user with the option to confirm or cancel an action by clicking on the buttons at the bottom.

Rendered Code

Open the Warning Modal

HTML


	
		 Warning		
	
	
		You are about to delete the training scheduled for April 28, 2016.
		Do you wish to continue?
		
			
			
		
  	
  	×

CSS

/** --- Modals -------------------- */
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: .8;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}

.reveal-modal {
  visibility: hidden;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 55.55556rem;
  width: 80%;
  background: #fff;
  position: fixed;
  z-index: 101;
  padding: 0;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.reveal-modal h1 {
  margin-bottom: 35px;
}
.reveal-modal h4 {
  font-size: 14px;
  text-transform: uppercase;
}
.reveal-modal p {
  margin: 10px 0 2px 0;
}
.reveal-modal .modal-header {
  background: #fff;
  color: #6F2A81;
  padding: 28px 40px;
  text-align: center;
}
.reveal-modal .modal-header h1 {
  font-size: 24px;
  letter-spacing: 3px;
  margin: 0;
}
.reveal-modal .modal-body {
  padding: 25px 40px 25px;
}
.reveal-modal .modal-header + .modal-body {
  padding: 0 40px 25px;
}
.reveal-modal .close-reveal-modal {
  color: #404040;
}
.reveal-modal .center_button {
  margin-top: 20px;
}
.reveal-modal .center_button .btn {
  margin-top: 22px;
}

.list-modal {
  font-size: 25px;
}
.list-modal .fa {
  font-size: 36px;
  margin-right: 13px;
  position: relative;
  top: 4px;
}
.list-modal .fa-check-circle {
  color: #84BD41;
}
.list-modal .loading {
  position: relative;
  left: -5px;
  top: 10px;
  margin-right: 5px;
}

.reveal-modal.small {
  width: 40%;
}

.reveal-modal.medium {
  width: 60%;
}

.reveal-modal.large {
  width: 70%;
}

.reveal-modal.xlarge {
  width: 95%;
}

.reveal-modal.full {
  width: 100%;
  top: 0;
  min-height: 100vh;
  max-width: none !important;
  height: 100%;
  height: 100vh;
}

.reveal-modal .close-reveal-modal {
  font-size: 30px;
  line-height: auto;
  position: absolute;
  top: 15px;
  right: 13px;
  color: .reveal-modal .close-reveal-modal grayMed;
  text-decoration: none;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
  font-weight: bold;
  cursor: pointer;
}
.reveal-modal .close-reveal-modal:hover {
  text-decoration: none;
}

/* Warning Modal */
.modal-warning .modal-header {
  background: #DE5D42;
  color: #fff;
}
.modal-warning .modal-header + .modal-body {
  padding-top: 25px;
}
.modal-warning .close-reveal-modal {
  color: #fff;
}

/* Capture Signature Modal */
.modal-signature form .row .column:first-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 57.35098%;
}
.modal-signature form .row .column:first-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column:last-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 40.29137%;
  margin-right: 0;
}
.modal-signature form .row .column:last-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column .btn.add-recipient {
  margin: 0;
  padding: 0;
  position: relative;
  top: 38px;
}

/* Remote Capture Signature Modal */
.modal-remote-signature .signature-container {
  border: 1px #ddd solid;
  height: 300px;
}

/* LT-IE9 Specific */
.lt-ie9 .reveal-modal-bg {
  position: fixed;
}
.lt-ie9 .reveal-modal {
  z-index: 99999 !important;
  top: 100px !important;
  filter: alpha(opacity=100) !important;
}

JavaScript

		$('a[data-reveal-id]').on('click', function () {
		  var id = $(this).attr('data-reveal-id');
		  $("#" + id).reveal('open');
		  return false;
		});

Modal - Capture Signature

When to Use

This is an example of a modal used for signature capture.

Functionality

This modal is intended to be used with your signature capture plug-in. Functionality is not included in this example.

Rendered Code

Open the Capture Signature Modal

HTML


	
		Capture Signature		
	
	
		Signature capture for Cameron Burgess, MD
		

		
		
			
				
					
						Prescriber's Email
						
						
				
						
					
						Link Expires After
						
							
								
			
			
				
					
						Sent Notifications To
						
						
				
				
					
							
			

			
				
				
			
		

  	
  	×

CSS

/** --- Modals -------------------- */
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: .8;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}

.reveal-modal {
  visibility: hidden;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 55.55556rem;
  width: 80%;
  background: #fff;
  position: fixed;
  z-index: 101;
  padding: 0;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.reveal-modal h1 {
  margin-bottom: 35px;
}
.reveal-modal h4 {
  font-size: 14px;
  text-transform: uppercase;
}
.reveal-modal p {
  margin: 10px 0 2px 0;
}
.reveal-modal .modal-header {
  background: #fff;
  color: #6F2A81;
  padding: 28px 40px;
  text-align: center;
}
.reveal-modal .modal-header h1 {
  font-size: 24px;
  letter-spacing: 3px;
  margin: 0;
}
.reveal-modal .modal-body {
  padding: 25px 40px 25px;
}
.reveal-modal .modal-header + .modal-body {
  padding: 0 40px 25px;
}
.reveal-modal .close-reveal-modal {
  color: #404040;
}
.reveal-modal .center_button {
  margin-top: 20px;
}
.reveal-modal .center_button .btn {
  margin-top: 22px;
}

.list-modal {
  font-size: 25px;
}
.list-modal .fa {
  font-size: 36px;
  margin-right: 13px;
  position: relative;
  top: 4px;
}
.list-modal .fa-check-circle {
  color: #84BD41;
}
.list-modal .loading {
  position: relative;
  left: -5px;
  top: 10px;
  margin-right: 5px;
}

.reveal-modal.small {
  width: 40%;
}

.reveal-modal.medium {
  width: 60%;
}

.reveal-modal.large {
  width: 70%;
}

.reveal-modal.xlarge {
  width: 95%;
}

.reveal-modal.full {
  width: 100%;
  top: 0;
  min-height: 100vh;
  max-width: none !important;
  height: 100%;
  height: 100vh;
}

.reveal-modal .close-reveal-modal {
  font-size: 30px;
  line-height: auto;
  position: absolute;
  top: 15px;
  right: 13px;
  color: .reveal-modal .close-reveal-modal grayMed;
  text-decoration: none;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
  font-weight: bold;
  cursor: pointer;
}
.reveal-modal .close-reveal-modal:hover {
  text-decoration: none;
}

/* Warning Modal */
.modal-warning .modal-header {
  background: #DE5D42;
  color: #fff;
}
.modal-warning .modal-header + .modal-body {
  padding-top: 25px;
}
.modal-warning .close-reveal-modal {
  color: #fff;
}

/* Capture Signature Modal */
.modal-signature form .row .column:first-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 57.35098%;
}
.modal-signature form .row .column:first-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column:last-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 40.29137%;
  margin-right: 0;
}
.modal-signature form .row .column:last-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column .btn.add-recipient {
  margin: 0;
  padding: 0;
  position: relative;
  top: 38px;
}

/* Remote Capture Signature Modal */
.modal-remote-signature .signature-container {
  border: 1px #ddd solid;
  height: 300px;
}

/* LT-IE9 Specific */
.lt-ie9 .reveal-modal-bg {
  position: fixed;
}
.lt-ie9 .reveal-modal {
  z-index: 99999 !important;
  top: 100px !important;
  filter: alpha(opacity=100) !important;
}

JavaScript

		$('a[data-reveal-id]').on('click', function () {
		  var id = $(this).attr('data-reveal-id');
		  $("#" + id).reveal('open');
		  return false;
		});

Modal - Capture Remote Signature

When to Use

This is an example of a modal used for remote signature capture.

Functionality

This modal is intended to be used with your signature capture plug-in. Functionality is not included in this example.

Rendered Code

Open the Capture Signature Modal

HTML


	
		Remote Capture Signature		
	
	
		Signature capture for Cameron Burgess, MD
		

		
		

			
				
				
						

  	
  	×

CSS

/** --- Modals -------------------- */
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: .8;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}

.reveal-modal {
  visibility: hidden;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 55.55556rem;
  width: 80%;
  background: #fff;
  position: fixed;
  z-index: 101;
  padding: 0;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.reveal-modal h1 {
  margin-bottom: 35px;
}
.reveal-modal h4 {
  font-size: 14px;
  text-transform: uppercase;
}
.reveal-modal p {
  margin: 10px 0 2px 0;
}
.reveal-modal .modal-header {
  background: #fff;
  color: #6F2A81;
  padding: 28px 40px;
  text-align: center;
}
.reveal-modal .modal-header h1 {
  font-size: 24px;
  letter-spacing: 3px;
  margin: 0;
}
.reveal-modal .modal-body {
  padding: 25px 40px 25px;
}
.reveal-modal .modal-header + .modal-body {
  padding: 0 40px 25px;
}
.reveal-modal .close-reveal-modal {
  color: #404040;
}
.reveal-modal .center_button {
  margin-top: 20px;
}
.reveal-modal .center_button .btn {
  margin-top: 22px;
}

.list-modal {
  font-size: 25px;
}
.list-modal .fa {
  font-size: 36px;
  margin-right: 13px;
  position: relative;
  top: 4px;
}
.list-modal .fa-check-circle {
  color: #84BD41;
}
.list-modal .loading {
  position: relative;
  left: -5px;
  top: 10px;
  margin-right: 5px;
}

.reveal-modal.small {
  width: 40%;
}

.reveal-modal.medium {
  width: 60%;
}

.reveal-modal.large {
  width: 70%;
}

.reveal-modal.xlarge {
  width: 95%;
}

.reveal-modal.full {
  width: 100%;
  top: 0;
  min-height: 100vh;
  max-width: none !important;
  height: 100%;
  height: 100vh;
}

.reveal-modal .close-reveal-modal {
  font-size: 30px;
  line-height: auto;
  position: absolute;
  top: 15px;
  right: 13px;
  color: .reveal-modal .close-reveal-modal grayMed;
  text-decoration: none;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
  font-weight: bold;
  cursor: pointer;
}
.reveal-modal .close-reveal-modal:hover {
  text-decoration: none;
}

/* Warning Modal */
.modal-warning .modal-header {
  background: #DE5D42;
  color: #fff;
}
.modal-warning .modal-header + .modal-body {
  padding-top: 25px;
}
.modal-warning .close-reveal-modal {
  color: #fff;
}

/* Capture Signature Modal */
.modal-signature form .row .column:first-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 57.35098%;
}
.modal-signature form .row .column:first-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column:last-child {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 40.29137%;
  margin-right: 0;
}
.modal-signature form .row .column:last-child:last-child {
  margin-right: 0;
}
.modal-signature form .row .column .btn.add-recipient {
  margin: 0;
  padding: 0;
  position: relative;
  top: 38px;
}

/* Remote Capture Signature Modal */
.modal-remote-signature .signature-container {
  border: 1px #ddd solid;
  height: 300px;
}

/* LT-IE9 Specific */
.lt-ie9 .reveal-modal-bg {
  position: fixed;
}
.lt-ie9 .reveal-modal {
  z-index: 99999 !important;
  top: 100px !important;
  filter: alpha(opacity=100) !important;
}

JavaScript

		$('a[data-reveal-id]').on('click', function () {
		  var id = $(this).attr('data-reveal-id');
		  $("#" + id).reveal('open');
		  return false;
		});

Modal - Basic Style

When to Use

Functionality

Hello!

Success!

Request for Prior Authorization for:

Has been sent to:

Modal - Modal Sizes

When to Use

Functionality

Small Modal

Medium Modal

Large Modal

Small Modal

Medium Modal

Large Modal

Modal - Warning

When to Use

Functionality

Warning

Warning

Modal - Capture Signature

When to Use

Functionality

Capture Signature

Capture Signature

Modal - Capture Remote Signature

When to Use

Functionality

Remote Capture Signature

Remote Capture Signature