Modal

Javascript required

The Modal component is a crucial UI element that appears as a popup, overlay, or dialog box on top of the main content to focus the user's attention on specific information, tasks, or interactions. The primary purpose of a modal is to display additional content without navigating to a new page or to capture user input in a confined space, such as a form or confirmation dialogue.

The modal component is a powerful tool for improving the user experience by providing context-related information and enabling interactions without disrupting the overall flow of the application. When the modal is active, it typically darkens or blurs the background, preventing users from interacting with the content behind it until they address the modal's purpose.

The following is a visual representation of the Modal component in use along with it's code usage.

<!-- Modal toggle Button -->
<button data-modal-target="modal-simple" data-modal-toggle="modal-simple" class="aegov-btn" type="button">
	Open Modal
</button>

<!-- Main modal -->
<div id="modal-simple" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full lg:max-w-xl max-h-full">
		<div class="aegov-modal-wrapper bg-whitely-100 py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<div>
				<div>
					<div class="text-2xl font-semibold mb-6">Hello</div>
					<p>To close the modal, you can use any of the following methods:</p>
					<ul class="list-decimal ps-4 space-y-3">
						<li>Press the "ESC" key on your keyboard.</li>
						<li>Click the button below</li>
						<li>When the backdrop outside the modal is clicked, and "data-modal-backdrop="static"" attribute is not used, the modal will be closed.</li>
					</ul>
				</div>
				<div class="mt-4 sm:mt-6 sm:flex sm:flex-row-reverse sm:gap-4">
					<!-- Button to close modal -->
					<button data-modal-hide="modal-simple" type="button" class="aegov-btn w-full sm:w-auto">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>

To create a modal you can simply add the following data attributes to your HTML:

data-modal-target="Modal-ID" - where "Modal-ID" is the ID of the modal you want to target.
data-modal-toggle="Modal-ID" - to toggle the modal (show/hide).
data-modal-show="Modal-ID" - to explicitly show the modal.
data-modal-hide="Modal-ID" - to close the modal.

These data attributes will handle the visibility and behavior of the modal for you.

The component is structured as follows:

<!-- Modal toggle Button -->
<button data-modal-target="modal-simple" data-modal-toggle="modal-simple" class="aegov-btn" type="button">
	... Button Text ...
</button>

<!-- Main modal -->
<div id="modal-simple" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full lg:max-w-xl max-h-full">
		<div class="aegov-modal-wrapper bg-whitely-100 py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<div>
				<div>
					<div> ... Modal Body Text ... </div>
				</div>
				<div class="mt-4 sm:mt-6 sm:flex sm:flex-row-reverse sm:gap-4">
					<!-- Button to close modal -->
					<button data-modal-hide="modal-simple" type="button" class="aegov-btn w-full sm:w-auto">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>

This component depends on Javascript

This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.

Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.

This is a variation of the modal component that is the recommended method of showing the selection of languages on any website for the federal governement entities. This modal method has been tested to be the most convinient and useful method, along with the ability to add additional language capabilities.

<!-- Modal toggle Button -->
<button data-modal-target="modal-lang" data-modal-toggle="modal-lang" class="aegov-btn" type="button">
	Choose Language
</button>
<!-- Modal Main -->
<div id="modal-lang" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-sm max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-lang">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<div class="lang-header">
					<a href="" class="lang-primary">English</a>
					<span class="lang-primary-divider"></span>
					<a href="" class="lang-primary font-notokufi">عربي</a>
				</div>
				<div class="lang-other px-3 md:px-4 xl:px-5">
					<div class="px-3 md:px-4 xl:px-5">
						<p class="lang-other-title">Other languages</p>
						<ul class="divide-y divide-aeblack-100">
							<li>
								<a href="" class="lang-other-link">French</a>
							</li>
							<li>
								<a href="" class="lang-other-link">Spanish</a>
							</li>
							<li>
								<a href="" class="lang-other-link">German</a>
							</li>
							<li>
								<a href="" class="lang-other-link">Portuguese</a>
							</li>
							<li>
								<a href="" class="lang-other-link">Russian</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="mt-6 md:mt-8 lg:mt-10 xl:mt-12">
					<p class="lang-bottom-text">The list of “Other languages” listed above use Google Translate to
						create an automated translation of content for the purpose of display. Accuracy of automated
						content translation is not guaranteed. </p>
				</div>
			</div>
		</div>
	</div>
</div>

All federal government entities (FGE's) are required to add the Gold Star Rating (GSR) logo in their header to identify the rating received.

It is recommended to provide more contextual information to the logo placed. By making the logo clickable, and opening the following modal, it will provide the end user with more context about the use of the rating.

<!-- Modal toggle Button -->
<button class="inline-block" data-modal-target="modal-gold-star" data-modal-toggle="modal-gold-star"><img class="inline-block w-10 md:w-12 lg:w-16 xl:w-20 2xl:w-24" src="/img/global-star.png" alt="Gold Star Rating" width="90" height="90"></button>

<!-- Main modal -->
<div id="modal-gold-star" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-sm max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-gold-star">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<div class="text-center">
					<img class="inline-block w-28 md:w-32 lg:w-36 xl:w-40 2xl:w-44 mb-4 xl:mb-6"
						src="/img/global-star.png" alt="Gold Star Rating" width="180" height="180">
				</div>
				<div class="text-center">
					<p class="text-base text-aeblack-800 font-normal mb-4 xl:mb-6">The Federal Authority for
						Identity,
						Citizenship, Customs & Port Security was awarded a <a href=""
							class="text-aegold-600 font-bold no-underline">4 star rating</a> by the Global Star
						Rating
						System for Services on 14/04/2022</p>
					<a href="" class="aegov-btn">Learn more</a>
				</div>
				<div class="text-center mt-4 xl:mt-6">
					<a href=""
						class="text-xs font-light truncate max-w-full no-underline">http://portal.gsr.ae/verify</a>
				</div>
			</div>
		</div>
	</div>
</div>

Customer Pulse is an initiative under which all government customers are asked for feedback about their experience in executing a transaction with the government or getting a service from the government, through a survey.

Feedback is gathered in the form of suggestion, complaint or compliment.

The design system recommends adding the Customer Pulse to all websites, and trigger the modal element to display the Customer Pulse to users.

<!-- Modal toggle Button -->
<button data-modal-target="modal-customer-pulse" data-modal-toggle="modal-customer-pulse" class="aegov-btn"
	type="button">
	Customer pulse
</button>

<!-- Main Modal -->
<div id="modal-customer-pulse" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-4xl max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-customer-pulse">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<img src="/img/customer-pulse-ss.png" alt="customer pulse" class="block">
			</div>
		</div>
	</div>
</div>

<!-- Modal toggle Button -->
<button data-modal-target="modal-single-action" data-modal-toggle="modal-single-action" class="aegov-btn"
	type="button">
	Single Action
</button>

<!-- Main Modal -->
<div id="modal-single-action" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-sm max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-single-action">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<div>
					<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-aegreen-50">
						<svg class="h-6 w-6 text-aegreen-600" xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 256 256">
							<rect width="256" height="256" fill="none" />
							<polyline points="40 144 96 200 224 72" fill="none" stroke="currentColor"
								stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
						</svg>
					</div>
					<div class="mt-3 text-center sm:mt-6">
						<h3 class="text-lg font-bold text-aeblack-900" id="modal-title">Payment successful</h3>
						<div class="mt-2">
							<p class="text-base text-aeblack-500">Lorem ipsum dolor sit amet consectetur
								adipisicing
								elit. Consequatur amet labore.</p>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-6">
					<button type="button" class="aegov-btn btn-block">Button</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Modal toggle Button -->
<button data-modal-target="modal-single-action-no-icon" data-modal-toggle="modal-single-action-no-icon"
	class="aegov-btn" type="button">
	Single Action
</button>

<!-- Main Modal -->
<div id="modal-single-action-no-icon" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-sm max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2"
				data-modal-hide="modal-single-action-no-icon">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<div>
					<div class="text-center">
						<h3 class="text-lg font-bold text-aeblack-900" id="modal-title">Payment successful</h3>
						<div class="mt-2">
							<p class="text-base text-aeblack-500">Lorem ipsum dolor sit amet consectetur
								adipisicing
								elit. Consequatur amet labore.</p>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-6">
					<button type="button" class="aegov-btn btn-block">Button</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Modal toggle Button -->
<button data-modal-target="modal-single-action-btns-no-icon"
	data-modal-toggle="modal-single-action-btns-no-icon" class="aegov-btn" type="button">
	Action Buttons
</button>

<!-- Main Modal -->
<div id="modal-single-action-btns-no-icon" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-sm max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<button type="button" class="aegov-modal-close top-2 end-2"
				data-modal-hide="modal-single-action-btns-no-icon">
				<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="sr-only">Close modal</span>
			</button>
			<div>
				<div>
					<div class="text-center">
						<h3 class="text-lg font-bold text-aeblack-900" id="modal-title">Payment successful</h3>
						<div class="mt-2">
							<p class="text-base text-aeblack-500">Lorem ipsum dolor sit amet consectetur adipisicing
								elit. Consequatur amet labore.</p>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-4">
					<button type="button" class="aegov-btn w-full sm:w-auto sm:col-start-2">Button</button>
					<button data-modal-hide="modal-single-action-btns-no-icon" type="button"
						class="aegov-btn btn-soft mt-3 sm:mt-0 w-full sm:w-auto sm:col-start-1">Button</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Modal toggle Button -->
<button data-modal-target="modal-simple-alert" data-modal-toggle="modal-simple-alert" class="aegov-btn"
	type="button">
	Simple Alert
</button>

<!-- Main Modal -->
<div id="modal-simple-alert" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full sm:max-w-lg max-h-full">
		<div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<div>
				<div class="sm:flex sm:items-start">
					<div
						class="mx-auto flex h-12 w-12 flex-shrink-0 items-start justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-aered-600 fill-current" xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 256 256">
							<rect width="256" height="256" fill="none" />
							<path
								d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" />
						</svg>
					</div>
					<div class="mt-3 text-center sm:ms-4 sm:mt-0 sm:text-left">
						<h3 class="text-lg font-bold text-aeblack-950" id="modal-title">Deactivate account
						</h3>
						<div class="mt-3">
							<p class="text-base font-normal text-aeblack-500 mb-0">Are you sure you want to
								deactivate your account? All of your data will be permanently removed from
								our
								servers forever. This action cannot be undone.</p>
						</div>
					</div>
				</div>
				<div class="mt-4 sm:mt-6 sm:flex sm:flex-row-reverse sm:gap-4">
					<button type="button" class="aegov-btn btn-red w-full sm:w-auto">Confirm</button>
					<button data-modal-hide="modal-simple-alert" type="button"
						class="aegov-btn btn-red btn-link mt-3 sm:mt-0 w-full sm:w-auto">Cancel</button>
				</div>
			</div>
		</div>
	</div>
</div>

Leverage the ` data-modal-placement ` attribute within the modal element to specify its position relative to the document body, utilizing the available options from ` {top|center|bottom}-{left|center|right} ` (for example, ` top-left ` or ` bottom-right `). This enables you to control the alignment and placement of the modal with respect to the viewport.

<!-- Modal toggle Button -->
<button data-modal-target="modal-simple-alert-placement" data-modal-toggle="modal-simple-alert-placement"
	class="aegov-btn" type="button">
	Placement Modal
</button>

<!-- Main Modal -->
<div data-modal-backdrop="static" data-modal-placement="bottom-right" id="modal-simple-alert-placement" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full lg:max-w-xl xl:max-w-2xl 2xl:max-w-3xl max-h-full">
		<div class="aegov-modal-wrapper bg-primary-50 py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<div>
				<div class="sm:flex sm:items-start">
					<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-start justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-8 w-8 text-camel-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
							<rect width="256" height="256" fill="none" />
							<path d="M208,40H48A16,16,0,0,0,32,56v58.77c0,89.61,75.82,119.34,91,124.39a15.53,15.53,0,0,0,10,0c15.2-5.05,91-34.78,91-124.39V56A16,16,0,0,0,208,40Zm-34.34,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.68l50.34-50.34a8,8,0,0,1,11.32,11.32Z" />
						</svg>
					</div>
					<div class="mt-3 text-center sm:ms-4 sm:mt-0 sm:text-left">
						<h3 class="text-lg font-bold text-primary-800" id="modal-title">Deactivate account</h3>
						<div class="mt-3 text-base font-normal text-primary-600">
							<p>Are you sure you want to deactivate your account? Our site enables scripts (e.g. cookies) that are able to read, store, and write information on your browser and device. The information processed by this script includes data relating to you, which may include personal identifiers.</p>
							<p>We use this information for various purposes - e.g. to deliver content, maintain security, enable user choice, improve our sites, and for marketing purposes. You may choose to accept or deny using our website accordingly. Learn more by visiting our Privacy Policy.</p>
						</div>
					</div>
				</div>
				<div class="mt-4 sm:mt-6 sm:flex sm:flex-row-reverse sm:gap-4">
					<button type="button" class="aegov-btn btn-secondary w-full sm:w-auto">Allow all and accept</button>
					<button data-modal-hide="modal-simple-alert-placement" type="button" class="aegov-btn btn-secondary btn-link mt-3 sm:mt-0 w-full sm:w-auto">Deny and quit</button>
				</div>
			</div>
		</div>
	</div>
</div>

This code represents a modal with scrollable content and a backdrop. To ensure the content is scrollable, the ` .max-h-80 ` class is used for smaller screens and ` md:max-h-[450px] ` for medium-sized screens and above. You may adjust the height parameter to suit your layout.

<!-- Modal toggle Button -->
<button data-modal-target="modal-scroll" data-modal-toggle="modal-scroll" class="aegov-btn" type="button">
	Scrollable Content
</button>

<!-- Main Modal -->
<div data-modal-backdrop="static" id="modal-scroll" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-50" role="dialog">
	<div class="relative sm:w-full lg:max-w-xl xl:max-w-2xl 2xl:max-w-3xl max-h-full">
		<div class="aegov-modal-wrapper bg-whitely-100 py-4 md:py-5 xl:py-8 px-4 xl:px-6">
			<div>
				<div class="sm:flex sm:items-start">
					<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-start justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-8 w-8 text-camel-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
							<rect width="256" height="256" fill="none" />
							<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z" />
						</svg>
					</div>
					<div class="mt-3 text-center sm:ms-4 sm:mt-0 sm:text-left">
						<div>
							<h3 class="text-lg font-bold text-primary-800" id="modal-title">Our terms and conditions have been updated</h3>
						</div>
						<div class="mt-6 text-base font-normal text-primary-600 max-h-80 sm:max-h-48 md:max-h-[450px] overflow-auto">
							<p>
								There has been an update to our terms and conditions, and in order to proceed, you must be aware of the following changes:
							</p>
							<ul class="list-disc space-y-8 mb-14">
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non posuere odio. Etiam mattis porta commodo. Nulla sagittis congue mi id vehicula.</li>
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non posuere odio. Etiam mattis porta commodo. Nulla sagittis congue mi id vehicula.</li>
							</ul>
							<p>
								Further to these changes, we have also received updates about changes in third-party software used to manage this portal. Information regarding changes in the terms and conditions of third-party software use is as follows:
							</p>
							<ul class="list-disc space-y-8 mb-14">
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non posuere odio. Etiam mattis porta commodo. Nulla sagittis congue mi id vehicula.</li>
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non posuere odio. Etiam mattis porta commodo. Nulla sagittis congue mi id vehicula.</li>
								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non posuere odio. Etiam mattis porta commodo. Nulla sagittis congue mi id vehicula.</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="mt-4 sm:mt-6 sm:flex sm:flex-row-reverse sm:gap-4">
					<button data-modal-hide="modal-scroll" type="button" class="aegov-btn btn-secondary w-full sm:w-auto">I have understood these updates</button>
				</div>
			</div>
		</div>
	</div>
</div>

Opening the Modal:To open the modal, use the ` data-modal-show ` attribute on an element with a unique ID (e.g., a button). When this element is clicked, it triggers the modal to appear with the specified placement based on the ` data-modal-placement ` attribute.
Closing the Modal: There are three ways to close the modal:
- Click on the backdrop: When the backdrop outside the modal is clicked, and ` data-modal-backdrop="static" ` attribute is not used, the modal will be closed.
- Click on a close button: Place a button inside the modal with the attribute ` data-modal-hide ` set to the unique ID of the modal. When this button is clicked, it hides the modal.
Toggle the Modal: To toggle the visibility of the modal, you can use the ` data-modal-toggle ` attribute on an element with the unique ID of the modal. When this element is clicked, it will toggle the visibility of the modal, showing it if it's hidden and hiding it if it's already visible.

To ensure accessibility for the Modal component, follow these guidelines:

Focus Management:Ensure that when the modal is opened, the focus is shifted to the first interactive element inside the modal, such as a close button or any form input. This helps users navigate through the modal content without needing to use the mouse.
ARIA Roles and Attributes: Add appropriate ARIA roles and attributes to the modal to enhance accessibility. For example, set ` role="dialog" ` to indicate that the element is a modal dialog, and add ` aria-labelledby ` to reference the ID of the element that provides the modal's title.
Screen Reader Accessibility:Make sure the modal's content is readable and accessible to screen readers. Use semantic HTML elements and descriptive text to convey the purpose and content of the modal.
Keyboard Navigation: Ensure that users can navigate and close the modal using only the keyboard. Users should be able to close the modal by pressing the "ESC" key, and they should be able to navigate through interactive elements inside the modal using the "Tab" key.

By implementing these behaviors and accessibility considerations, you can create a modal component that is both user-friendly and accessible to all users.

Input

Navigation

Modal

Introduction

Visual representation

Code structure

Variations

Language selection modal

Gold Star Rating modal

Customer Pulse modal

Single action

Single action, without an icon

Multiple actions

Simple alert

Simple alert with Bottom-Right placement

Scrollable content

Behaviour

Accessibility

on this page