<div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="" data-modal="confirm">
    <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 js-confirm-cancel svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
                <h3 class="modal-title">
                    <span class="text">Notice</span>
                </h3>
            </div>

            <div class="modal-section confirm-content">
                <div class="confirm-icon">
                    <i aria-hidden="true" class="fa fa-"></i>
                </div>

                <h3 class="confirm-heading"></h3>

                <div class="button-group">
                    <button class="btn btn-default btn-confirm-submit js-confirm-submit js-modal-exit" type="button">
						<span class="text"></span>
					</button>

                    <button class="btn btn-default js-modal-exit" type="button">
						<span class="text">Cancel</span>
					</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="{{confirmStatus}}" data-modal="confirm">
	<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 js-confirm-cancel svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
				<h3 class="modal-title">
					<span class="text">Notice</span>
				</h3>
			</div>

			<div class="modal-section confirm-content">
				<div class="confirm-icon">
					<i aria-hidden="true" class="fa fa-{{confirmIcon}}"></i>
				</div>

				<h3 class="confirm-heading">{{{confirmHeading}}}</h3>

				{{#if confirmMessage}}
				<p class="confirm-body">{{{confirmMessage}}}</p>
				{{/if}}

				<div class="button-group">
					<button class="btn btn-default btn-confirm-submit js-confirm-submit{{#if confirmCustom }}-custom{{/if}} js-modal-exit" type="button">
						<span class="text">{{confirmButton}}</span>
					</button>

					<button class="btn btn-default js-modal-exit" type="button">
						<span class="text">Cancel</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
/* No context defined for this component. */
  • Content:
    .confirm {
    	&.modal {
    		.modal-inner {
    			max-width: 125rem;
    		}
    	}
    
    	&[data-status="warning"], &[data-status="danger"] {
    		.modal-header {
    			border-bottom-color: $color-irma-danger;
    		}
    
    		.confirm-icon, .btn-confirm-submit {
    			background: $color-irma-danger;
    		}
    
    		.btn-confirm-submit {
    			&:hover, &:focus {
    				background: $color-irma-danger-dark;
    			}
    		}
    	}
    
    	&[data-status="good"], &[data-status="success"] {
    		.modal-header {
    			border-bottom-color: $color-irma-spearmint;
    		}
    
    		.confirm-icon, .btn-confirm-submit {
    			background: $color-irma-spearmint;
    		}
    
    		.btn-confirm-submit {
    			&:hover, &:focus {
    				background: $color-irma-mint;
    			}
    		}
    	}
    
    	&[data-status="caution"] {
    		.modal-header {
    			border-bottom-color: $color-irma-goldenrod;
    		}
    
    		.confirm-icon, .btn-confirm-submit {
    			background: $color-irma-goldenrod;
    			color: $color-irma-navy;
    		}
    
    		.btn-confirm-submit {
    			&:hover, &:focus {
    				background: $color-irma-gold;
    			}
    		}
    	}
    
    	.confirm-content {
    		text-align: center;
    
    		.button-group {
    			margin-top: 10rem;
    			justify-content: center;
    		}
    	}
    
    	.confirm-icon {
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		width: 15rem;
    		height: 15rem;
    		margin: 0 auto;
    
    		border-radius: 50%;
    		color: white;
    
    		@include font-size-other(32px);
    	}
    
    	.confirm-heading {
    		margin-top: 6rem;
    	}
    
    	.confirm-body {
    		margin-top: 3rem;
    	}
    }
  • URL: /components/raw/confirm/_confirm.scss
  • Filesystem Path: components/01-components/confirm/_confirm.scss
  • Size: 1.4 KB
  • Content:
    /* 
     *	_confirm.js
     */
    
    irma.confirm = (function () {
    	'use strict';
    
    	var createNew = function (options, callback) {
    		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript(options);
    
    			$('.page-container').append(html);
    			irma.modal.openModal('confirm');
    
    			$('.js-confirm-submit-custom').on('click', function () {
    				callback();
    			});
    		});
    	};
    
    	var confirm = function ($target, options) {
    		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript(options);
    
    			$('.page-container').append(html);
    
    			irma.modal.openModal('confirm');
    
    			$('.confirm .js-confirm-submit').data('target', $target);
    		});
    	};
    
    	var init = function () {
    		$(document).on('click', '.js-confirm', function (e) {
    			var $btn = $(this),
    				data = $btn.data();
    
    			if (!data.confirmed) {
    				e.stopImmediatePropagation();
    				e.preventDefault();
    				confirm($btn, data);
    			}
    
    			else {
    				$btn.data('confirmed', false);	
    			}
    
    		}).on('click', '.js-table-action', function (e) {
    			var action = _.find(irma.confirmActions, { name: $(this).data().action });
    
    			if (action) {
    				var $btn = $(this);
    
    				var data = _.merge(action, $(this).data());
    
    				if (!data.confirmed) {
    					e.stopImmediatePropagation();
    
    					confirm($btn, data);
    				}
    				else {
    					$btn.data('confirmed', false);	
    				}
    			}
    
    		}).on('click', '.js-confirm-submit', function () {
    			var $target = $(this).data().target;
    
    			$target.data('confirmed', true)
    				.trigger('click');
    
    			$(this).closest('.confirm').remove();
    
    		});
    	};
    
    	return {
    		init: init,
    		createNew: createNew
    	};
    
    }());
  • URL: /components/raw/confirm/confirm.js
  • Filesystem Path: components/01-components/confirm/confirm.js
  • Size: 1.8 KB
  • data-confirm-icon reference: https://fontawesome.com/v4.7.0/icons/

  • recommended: use icon “share-square-o” for form submission and “trash-o” for deletion

  • data-status options are “warning” and “good”