<div class="modal -with-overlay -nav-padded js-modal js-modal-exit" data-modal="save-search">
    <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">Save search</span>
                </h3>
            </div>

            <div class="modal-section modal-form">
                <div class="form-field save-field" data-col="6" data-required="true" data-min-length="5">
                    <label for="save-search-title" data-flex="1">Save As</label>
                    <input name="save-search-title" placeholder="&hellip;">

                    <button type="button" class="btn svg-wrap btn-save-as js-save-as" aria-label="Save as existing search">
						<svg viewBox="0 0 25 25">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
						</svg>
					</button>
                </div>
            </div>

            <div class="modal-section modal-results">
            </div>

            <div class="modal-section modal-buttons">
                <button class="btn btn-default js-save-search js-modal-submit" type="button">
					<span class="text">Save this search</span>
				</button>

                <button class="btn btn-default js-modal-exit" type="button">
					<span class="text">Cancel</span>
				</button>
            </div>
        </div>
    </div>
</div>
<div class="modal -with-overlay -nav-padded js-modal js-modal-exit" data-modal="save-search">
	<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">Save search</span>
				</h3>
			</div>

			<div class="modal-section modal-form">
				<div class="form-field save-field" data-col="6" data-required="true" data-min-length="5">
					<label for="save-search-title" data-flex="1">Save As</label>
					<input name="save-search-title" placeholder="&hellip;">

					<button type="button"
							class="btn svg-wrap btn-save-as js-save-as"
							aria-label="Save as existing search" >
						<svg viewBox="0 0 25 25">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
						</svg>
					</button>
				</div>
			</div>

			<div class="modal-section modal-results">
			</div>

			<div class="modal-section modal-buttons">
				<button class="btn btn-default js-save-search js-modal-submit" type="button">
					<span class="text">Save this search</span>
				</button>

				<button class="btn btn-default js-modal-exit" type="button">
					<span class="text">Cancel</span>
				</button>
			</div>
		</div>
	</div>
</div>
/* No context defined for this component. */
  • 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