<button type="button" class="js-btn-modal" data-modal="modal-id">
	Launch Modal
</button>

<div class="modal js-modal js-modal-exit" data-modal="modal-id">
    <div class="modal-inner inner">
        <div class="modal-panel">
            <div class="modal-header">
                <button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
                <h3 class="modal-title">
                    <span class="text">Modal Title</span>
                </h3>
            </div>
            <div class="modal-section">
            </div>
        </div>
    </div>
</div>
<button type="button" class="js-btn-modal" data-modal="modal-id">
	Launch Modal
</button>


<div class="modal js-modal js-modal-exit" data-modal="modal-id">
	<div class="modal-inner inner">
		<div class="modal-panel">
			<div class="modal-header">
				<button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
				<h3 class="modal-title">
					<span class="text">Modal Title</span>
				</h3>
			</div>
			<div class="modal-section">
			</div>
		</div>
	</div>
</div>
/* No context defined for this component. */
  • Content:
    .modal-advanced-search {
    	.modal-inner.inner {
    		max-width: 225rem;
    	}
    
    	.modal-panel.advanced-search-container {
    		max-width: 225rem;
    		height: calc(100% - 20rem);
    	}
    
    	.modal-advanced-form {
    		background: white;
    
    		.advanced-search-field {
    		}
    
    		.advanced-search-label {
    			color: $color-irma-slate;
    			opacity: 0.7;
    
    			@include font-primary-bold;
    			text-transform: uppercase;
    		}
    
    		.advanced-search-input {
    		}
    
    		.advanced-search-criteria {
    			.advanced-search-field {
    				margin-top: 5rem;
    
    				.dropdown-label {
    					width: 100%;
    					display: block;
    					padding-left: 4rem;
    
    					background: white;
    				}
    
    				.dropdown-options {
    					padding: 2.5rem 0;
    
    					.dropdown-item {
    						padding: 1rem 4rem;
    					}
    				}
    
    				.checkbox-list {
    					margin-left: -6rem;
    					// padding-left: 20px;
    				}
    
    				.checkbox-item {
    					margin-left: 6rem;
    				}
    			}
    
    			.btn-container {
    				display: flex;
    				margin-top: 5rem;
    				justify-content: flex-end;
    				align-items: center;
    
    				> * {
    					white-space: nowrap;
    
    					&:not(:first-child) {
    						margin-left: 7.5rem;
    					}
    				}
    			}
    
    			.btn-update-advanced {
    				display: inline-block;
    				
    				text-align: center;
    			}
    		}
    
    		label {
    			line-height: 10rem;
    		}
    	}
    
    	.modal-section.advanced-search-results {
    		min-height: 50rem;
    
    		&.-loading {
    			&::before {
    				content: '';
    
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				transform: translate(-50%, -50%);
    
    				display: block;
    				width: 10rem;
    				height: 10rem;
    
    				background: {
    					image: url('../img/spinner.png');
    					size: 100%;
    					repeat: no-repeat;
    					position: center;
    				}
    
    				animation: spin-center 1s linear infinite;
    			}
    		}
    	}
    
    	&.modal-code-lookup {
    		.modal-results {
    			&.-loading {
    				&::after {
    					content: 'Loading code database for first time';
    
    					position: absolute;
    					top: 50%;
    					left: 50%;
    					transform: translate(-50%, -50%) translateY(10rem);
    
    					opacity: 0.8;
    				}
    			}
    		}
    	}
    
    	.button-group {
    		justify-content: flex-end;
    	}
    
    	.btn-browse {
    		display: flex;
    		align-items: center;
    
    		background: $color-irma-spearmint;
    		color: $color-irma-navy;
    
    		&:hover, &:focus {
    			background: $color-irma-mint;
    		}
    
    		& > * {
    			&:not(:first-child) {
    				margin-left: 3rem;
    			}
    		}
    
    		.fa {
    			@include font-size-other(15px);
    		}
    	}
    
    	@media screen and (max-width: 800px) {
    		.advanced-search-criteria {
    			display: block !important;
    
    			.btn-container {
    				width: 100% !important;
    			}
    
    			.criteria-checkbox {
    				width: 100% !important;
    
    				> * {
    					width: auto;
    				}
    
    				> label {
    					padding-right: 5rem;
    				}
    			}
    		}
    	}
    }
  • URL: /components/raw/modal/_modal--search.scss
  • Filesystem Path: components/01-components/modal/_modal--search.scss
  • Size: 2.6 KB
  • Content:
    .modal {
    	visibility: hidden;
    	opacity: 0;
    
    	pointer-events: none;
    
    	&.-active {
    		visibility: visible;
    		opacity: 1;
    
    		pointer-events: auto;
    	}
    
    	&.-with-overlay {
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 10;
    
    		width: 100%;
    		height: 100vh;
    
    		background: rgba($color-irma-mist, 0.7);
    	}
    
    	.modal-inner {
    		position: relative;
    
    		height: 100%;
    		max-width: 162rem;
    		width: calc(100% - 20rem);
    		margin: 0 auto;
    	}
    
    	.modal-panel {
    		position: absolute;
    		top: 50%;
    		transform: translate(0, -50%);
    
    		display: flex;
    		flex-direction: column;
    		max-height: calc(100% - 20rem);
    		width: 100%;
    
    		background: $color-irma-white;
    		box-shadow: 0 5px 20px 0 rgba(black, 0.1);
    	}
    
    	.modal-header {
    		position: relative;
    		transform: rotateZ(0);
    
    		width: 100%;
    		height: calc(10rem + 5px);
    		padding-left: 5rem;
    
    		color: white;
    		border-bottom: 5px solid $color-irma-border;
    
    		&::before {
    			content: '';
    
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: -1;
    
    			display: block;
    			width: 100%;
    			height: 10rem;
    
    			background: $color-irma-navy;
    		}
    
    		.modal-title {
    			line-height: 10rem;
    			@include font-size-small;
    			text-transform: uppercase;
    			@include font-primary-bold;
    		}
    	}
    
    	.btn-modal-exit {
    		position: absolute;
    		top: 0;
    		right: 0;
    
    		padding: 0;
    		width: 10rem;
    		height: 10rem;
    		min-height: 0;
    
    		font-size: 4rem;
    		text-align: center;
    	}
    
    	.modal-slide-container {
    		display: flex;
    		width: 100%;
    		flex: 1 1 auto;
    		overflow: hidden;
    
    		.modal-slider {
    			transform: translate3d(0, 0, 0);
    
    			display: flex;
    			width: 200%;
    			flex: 0 0 auto;
    
    			transition: all $transition-reveal;
    
    			&.-slid {
    				transform: translate3d(-50%, 0, 0);
    			}
    		}
    
    		.modal-slide {
    			display: flex;
    			flex-direction: column;
    			width: 50%;
    			height: 100%;
    			flex: 0 0 auto;
    		}
    	}
    
    	.modal-section {
    		padding: 10rem;
    
    		.modal-subheading {
    			text-transform: uppercase;
    		}
    	}
    
    	.form-field {
    		&.-invalid {
    			&::after {
    				content: 'Must input at least ' attr(data-min-length) ' characters';
    
    				display: block;
    				width: 100%;
    				padding: {
    					// left: (100% / 6);
    					left: 25%;
    					top: 1em;
    				}
    
    				color: $color-irma-danger;
    				
    				@include font-size-small;
    				font-style: italic;
    			}
    
    			input {
    				box-shadow: 0 0 0 2px $color-irma-danger;
    			}
    		}
    	}
    
    	.modal-form {
    		background: white;
    
    		label {
    			color: $color-irma-slate;
    			opacity: 0.7;
    
    			@include font-primary-bold;
    			text-transform: uppercase;
    			line-height: 10rem;
    		}
    
    		.search-field {
    			&:not(:first-child) {
    				margin-top: 5rem;
    			}
    		}
    
    		.save-field {
    			input {
    				flex: 1 1 auto;
    			}
    
    			.btn-save-as {
    				flex: 0 0 auto;
    				width: 10rem;
    				height: 10rem;
    				margin-left: 1rem;
    
    				box-shadow: 0 0 0 1px $color-irma-border;
    
    				line-height: 12rem;
    				text-align: center;
    
    				&:hover, &:focus {
    					background: $color-irma-navy;
    					color: white;
    				}
    
    				svg {
    					height: 3rem;
    					width: 3rem;
    
    					* {
    						fill: currentColor;
    					}
    				}
    			}
    		}
    	}
    
    	&.-expanded {
    		.modal-form {
    			.save-field {
    				.btn-save-as {
    					svg {
    						transform: rotate(180deg);
    					}
    				}
    			}
    		}
    	}
    
    	.form-group {
    		max-width: none;
    
    		&[data-col] {
    			width: 100%;
    		}
    	}
    
    	.modal-buttons {
    		display: flex;
    		justify-content: flex-end;
    		flex: 0 0 auto;
    
    		background: white;
    
    		&:not(.modal-section) {
    			margin-top: 5rem;
    
    			background: transparent;
    		}
    
    		.btn {
    			display: inline-block;
    
    			&:not(:first-child) {
    				margin-left: 2rem;
    			}
    		}
    	}
    
    	.modal-results {
    		position: relative;
    		transform: translateZ(0);
    
    		display: flex;
    		flex-direction: column;
    		padding: 5rem;
    
    		overflow-y: auto;
    		height: 100%;
    
    		.search-results {
    			display: flex;
    			flex-direction: column;
    			max-height: 100%;
    		}
    
    		.table {
    			padding: 3rem;
    			padding-top: 0;
    
    			overflow-y: auto;
    			height:100%;
    
    			.table-row:not(.-with-input) {
    				padding: {
    					left: 3rem;
    					right: 3rem;
    				}
    
    				&.table-header {
    					width: calc(100% + 6rem);
    					margin-left: -3rem;
    					padding: {
    						left: 6rem;
    						right: 6rem;
    					}
    
    					& + .table-row {
    						margin-top: 2px;
    					}
    				}
    			}
    		}
    	}
    
    	.modal-browse {
    		display: flex;
    		overflow: hidden;
    
    		background: white;
    
    		.browse-tree {
    			overflow-y: scroll;
    			width: 100%;
    	
    			&.-loading {
    				min-height: 20rem;
    
    				&::before {
    					content: '';
    
    					position: absolute;
    					top: 50%;
    					left: 50%;
    					transform: translate(-50%, -50%);
    
    					display: block;
    					width: 10rem;
    					height: 10rem;
    
    					background: {
    						image: url('../img/spinner.png');
    						size: 100%;
    						repeat: no-repeat;
    						position: center;
    					}
    
    					animation: spin 1s linear infinite;
    				}
    			}
    
    			.accordion-group {
    				position: relative;
    				transform: translateZ(0);
    			}
    		}	
    
    		.accordion {
    			& + .accordion {
    				margin-top: 1rem;
    			}
    
    			&:not(.-collapsed) {
    				& > .accordion-content {
    					margin-top: 1rem;
    				}
    
    				& > .accordion-header {
    					height: calc(10rem + 5px);
    
    					border-bottom: 5px solid $color-irma-selected;
    				}
    			}
    
    			.accordion-header {
    				background: $color-irma-offwhite;
    			}
    
    			.accordion-title {
    				text-transform: none;
    			}
    
    			.accordion-content {
    				padding: {
    					top: 0;
    					bottom: 0;
    					right: 0;
    				}
    
    				border-left: 1px solid $color-irma-silver;
    			}
    		}
    
    		.code {
    			&:last-child {
    				border-bottom: none;
    			}
    		}
    
    		.code-label {
    			position: absolute;
    			right: 5rem;
    			top: 50%;
    			transform: translateY(-50%);
    
    			letter-spacing: 0.05em;
    
    			.main-code {
    				@include font-primary-bold;
    			}
    
    			.code-addend {
    				margin-left: -0.2em;
    
    				opacity: 0.33;
    			}
    		}
    
    		.table-row {
    			position: relative;
    		}
    	}
    
    	&[data-modal='save-search'] {
    		&.-expanded {
    			.modal-results {
    				height: auto;
    				padding: 5rem;
    			}
    
    			.modal-buttons {
    				border: none;
    			}
    		}
    
    		&.-loading {
    			.modal-results {
    				height: 20rem;
    
    				&::before {
    					content: '';
    
    					position: absolute;
    					top: 5rem;
    					left: 50%;
    					transform: translate(-50%, 0);
    
    					display: block;
    					width: 10rem;
    					height: 10rem;
    
    					background: {
    						image: url('../img/spinner.png');
    						size: 100%;
    						repeat: no-repeat;
    						position: center;
    					}
    
    					animation: spin 1s linear infinite;
    				}
    			}
    		}
    
    		.modal-results {
    			height: 0;
    			overflow: hidden;
    			padding: 0;
    
    			transition: height $transition;
    		}
    
    		.modal-buttons {
    			border-top: 1px solid $color-irma-border;
    		}
    	}
    
    	@media screen and (max-width: 1024px), screen and (max-height: 768px), screen and (min-aspect-ratio: 16 / 9) {
    		z-index: 20 !important;
    
    		padding: 0 !important;
    
    		&.modal-advanced-search {
    			.modal-inner {
    				max-width: none !important;
    				width: calc(100% - 8rem) !important;
    
    				.modal-panel.advanced-search-container {
    					width: 100% !important;
    					max-width: none !important;
    					max-height: calc(100% - 8rem) !important;
    					height: calc(100% - 8rem) !important;
    				}
    			}
    		}
    	}
    }
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: components/01-components/modal/_modal.scss
  • Size: 7 KB
  • Content:
    /* 
     *	_modal.js
     */
    
    irma.modal = (function () {
    	'use strict';
    
    	var $body = $('body'),
    		$html = $('html'),
    		$tabs, $noTabs, 
    		tabIndex = [],
    		$lastFocus,
    		scrollTopBeforeOpen = 0;
    
    	var openModal = function (name) {
    		$lastFocus = $('*:focus');
    
    		scrollTopBeforeOpen = $('html').scrollTop();
    
    		$('.js-modal').not('[data-modal=\'' + name + '\']').removeClass('-active');
    		if (name != "notifications") {
    			$('.js-notifications').removeClass('-active');
    		}
    
    		var $modal = $('.js-modal').filter('[data-modal=\'' + name + '\']').eq(0);
    
    		$modal.toggleClass('-active');
    
    		setTimeout(function () {
    			$modal.find('.modal-header').eq(0).focus();
    			$modal.find('input').eq(0).focus();
    		}, 100);
    
    		$html.toggleClass('-no-scroll');
    
    		$tabs = $modal.add('.site-header, .primary-nav').find('input, .btn, [role=\'button\'], a');
    		$noTabs = $('input, .btn, [role=\'button\'], a').not($tabs);
    
    		$noTabs.each(function (i) {
    			tabIndex[i] = $(this).attr('tabindex');
    		}).attr('tabindex', '-1');
    	};
    
    	var closeModal = function ($modal) {
    		$modal = $modal || $('.js-modal');
    
    		$modal.removeClass('-active');
    		$html.removeClass('-no-scroll');
    		$lastFocus.focus();
    
    		$('html').scrollTop(scrollTopBeforeOpen);
    
    		$noTabs.each(function (i) {
    			if (tabIndex[i]) {
    				$(this).attr('tabindex', tabIndex[i]);
    			}
    			else {
    				$(this).removeAttr('tabindex');
    			}
    		});
    		tabIndex = [];
    
    		$('.confirm').remove();
    	};
    
    	var init = function () {
    		$(document).on('click', '.js-btn-modal', function (e) {
    			e.stopPropagation();
    
    			openModal($(this).attr('data-modal'));
    
    		}).on('click', '.js-modal', function (e) {
    			e.stopPropagation();
    
    		}).on('keypress', '.js-keypress-modal', function (e) {
    			if (e.which == 13) {
    				e.stopPropagation();
    
    				openModal($(this).attr('data-modal'));
    			}
    
    		}).on('keyup', function (e) {
    			if ($('.js-modal.-active').length > 0 && $('.js-tooltip').length === 0) {
    				if (e.which == 27) {
    					closeModal();
    				}
    			}
    			
    		}).on('keypress', function (e) {
    			if ($('.js-modal.-active').length > 0 && $('.js-tooltip').length === 0) {
    				if (e.which == 13) {
    					e.preventDefault();
    					$('.js-modal.-active').find('.js-modal-submit').trigger('click');
    				}
    			}
    			
    		}).on('click', function () {
    			if (!($(this).is('.js-no-modal') || $(this).closest('.js-no-modal').length > 0) && $('.js-modal.-active').length > 0) {
    				closeModal();
    			}
    
    		}).on('click', '.js-modal-exit', function () {
    			closeModal($(this).closest('.modal'));
    
    		}).on('click', '.modal-panel', function (event) {
    			event.stopPropagation();
    
    		});
    
    	};
    
    	return {
    		init: init,
    		closeModal: closeModal,
    		openModal: openModal
    	};
    
    }());
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: components/01-components/modal/modal.js
  • Size: 2.7 KB
  • Class ‘js-btn-modal’ triggers event.

  • Value of attribute ‘data-modal’ must match target ‘js-modal’ element.


  • Class ‘js-modal’ receives event.

  • Value of attribute ‘data-modal’ must match triggering ‘js-btn-modal’ element

  • Class ‘modal’ includes basic active/inactive styles

  • Inline style for demonstration only