Modals

<div class="sui-modal">

	<div
		role="dialog"
		id="modal-unique-id"
		class="sui-modal-content"
		aria-modal="true"
		aria-labelledby="modal-title-unique-id"
		aria-describedby="modal-description-unique-id"
	>

		... add here modal content ...

	</div>

</div>

<!--
OPEN MODAL.
You can only use these attributes on an element that's placed "outside" modal.

1. (required) data-modal-open="unique-id"
This attribute will open the modal you assign.

2. data-modal-open-focus="focused-element-id"
This attribute will focus element you assign that's
placed inside modal when open function fires.

!! When not used, modal will find the first focusable
element in the markup to focus it.

3. data-modal-close-focus="focused-element-id"
This attribute will focus element you assign that's
placed outside modal when close function fires.

!! When not used, modal will find focus-back button
you clicked to open modal on first place.

4. data-modal-mask="true"
This attribute will allow overlay mask to fire close
function when clicking on it.

!! When not used, overlay mask will do nothing.

5. data-esc-close
true|false
Default: true
Handles whether the ESC key closes the modal.
If 'true', pressing the ESC key closes the modal.
If 'false', pressing the ESC key does nothing.

6. data-modal-animated
true|false
Default: true
Handles whether the modal is animated.
If 'true', modal will be animated.
If 'false', modal will not be animated.

-->
<button
	data-modal-open="unique-id"
	data-modal-open-focus="focused-element-id"
	data-modal-close-focus="focused-element-id"
	data-modal-mask="true"
	data-esc-close="true"
	data-modal-animated="true"
>
	Open Modal
</button>

<!--
CLOSE MODAL.
You can use this attribute on an element that's placed "inside" modal.
-->
<button
	data-modal-close=""
>
	Close Modal
</button>

( function( $ ) {

	/**
	* OPEN MODAL.
	*
	* @desc Trigger this function when performing a click action on
	* an element that's placed outside modal.
	*
	* @param modalId
	* The ID of the element serving as the modal container.
	*
	* @param focusAfterClosed
	* This is a required and important paramether. You can use the following
	* values:
	* - this, when you click on a button or any element to open the modal it
	*     will find this same element to focus it when modal closes.
	* - unique-id, when you want to focus an element outside modal when
	*     it closes.
	*
	* @param focusWhenOpen (optional)
	* Use `element-unique-id` that's inside modal for screenreader to
	* focus it when modal opens. You can set it to `undefined` if you
	* don't want/need this function and modal will automatically find
	* the first focusable element.
	*
	* @param hasOverlayMask (optional)
	* When is set to `true` modal overlay mask can be clicked and will
	* fire close modal function.
	*
	* @param isCloseOnEsc (optional)
	* boolean
	* Default: true
	* Handles whether the ESC key closes the modal.
	* If 'true', pressing the ESC key closes the modal.
	* If 'false', pressing the ESC key does nothing.
	*
	* @param isAnimated
	* Default: true
	* Optional boolean parameter that when it's set to "true", it will enable animation in dialog box.
	*
	* SUI.openModal( modalId, focusAfterClosed, focusWhenOpen, hasOverlayMask, isCloseOnEsc, isAnimated );
	*/
	$( 'button' ).on( 'click', function() {

		const modalId        = 'modal-unique-id',
			focusAfterClosed = this,
			focusWhenOpen    = undefined,
			hasOverlayMask   = false,
			isCloseOnEsc     = true,
			isAnimated     	 = true
		;

		SUI.openModal(
			modalId,
			focusAfterClosed,
			focusWhenOpen,
			hasOverlayMask,
			isCloseOnEsc,
			isAnimated
		);

	});

	/**
	* CLOSE MODAL.
	*
	* @desc Hides the current top modal and sets focus on the element
	* specified for "focusAfterClosed" on open function.
	*
	* SUI.closeModal( closeButton );
	*/
	$( 'button' ).on( 'click', function() {
		SUI.closeModal();
	});

}( jQuery ) );

<div class="sui-modal">
	...
</div>

<div class="sui-modal sui-modal-xl">
	...
</div>

<div class="sui-modal sui-modal-lg">
	...
</div>

<div class="sui-modal sui-modal-md">
	...
</div>

<div class="sui-modal sui-modal-sm">
	...
</div>