Modal

Example & HTML Structure

Example of the Modal component:

The following example shows the full HTML structure of a Modal with navigation.

<dialog aria-label="Modal" class="bt1d-modal" id="modal-1">
	<form class="bt1d-modal__header" method="modal">
		<button aria-label="Close" class="bt1d-modal__button">
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-close-large"></use>
			</svg>
		</button>
	</form>
	<div class="bt1d-modal__content">
		<!-- Content here. -->
	</div>
	<footer class="bt1d-modal__footer">
		<button class="bt1d-modal__button" disabled type="button">
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-chevron-left"></use>
			</svg>
			Previous
		</button>
		<button aria-controls="modal-2" aria-haspopup="dialog" class="bt1d-modal__button js-bt1d-modal" type="button">
			Next
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-chevron-right"></use>
			</svg>
		</button>
	</footer>
</dialog>

Key Classes:

• js-bt1d-modal Buttons with this class will open the modal with the ID indicated by its aria-controls attribute. When a button with this class is used inside another modal, that modal will be closed before the target modal is opened. This can be used for the Next and Previous buttons to allow navigating between modals.

• bt1d-modal: The main popup window. A <dialog> element should be used. An ID is required to allow the modal to be opened by the js-bt1d-modal button.
• bt1d-modal__header: The popup toolbar that contains the close button. By using a <form> element with method="modal" the popup can be closed without JavaScript.
• bt1d-modal__button: Used for the close button, and the optional Next and Previous buttons.
  • bt1d-icon: An Icon for the button icons.
• bt1d-modal__content: A wrapper for the popup content.
• bt1d-modal__footer: An optional bottom row containing navigation buttons.