I am newbie in tailwind. And i have page like this below
This build using React and Tailwind, do you know how to set the backdrop on this modal so it can be full for all screen?
Below my current code:
<div className="rounded bg-gray-50 dark:bg-gray-800 mb-4 mt-8 p-8">
<h2 className="text-4xl font-extrabold dark:text-white mb-10">
{t("text.add_event-agenda")}
</h2>
<div>
<br />
<div className="flex flex-row w-full py-2">
<button
onClick={handleClickAdd}
className="text-white w-full bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
{t(" Add Schedule")}
</button>
</div>
<br />
</div>
</div>
{/* Modal Add Agenda */}
<div
id="modalEl"
tabIndex={-1}
aria-hidden="true"
className="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"
>
<div className="relative w-full max-w-md max-h-full">
{/* <!-- Modal content --> */}
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="authentication-modal"
>
<svg
className="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span className="sr-only">Close modal</span>
</button>
<div className="px-6 py-6 lg:px-8">
<h3 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">
Sign in to our platform
</h3>
<div className="flex flex-col">
{/* Agenda Title */}
<EVSInput
t={t}
label="label.agenda-name"
type="text"
name="eventAgenda.name"
placeholder="label.agenda-name"
/>
{/* Agenda Session */}
<EVSInput
t={t}
label="label.session-name"
type="text"
name="eventAgenda.sessionName"
placeholder="label.session-name"
/>
{/* Agenda Speaker */}
<EVSInput
t={t}
label="label.agenda-speaker"
type="text"
name="eventAgenda.speaker"
placeholder="label.agenda-speaker"
/>
<div className="flex flex-row gap-3">
{/* Agenda Start */}
<div>
<label
htmlFor="text"
className="block py-2 text-sm font-medium text-gray-900 dark:text-white"
>
{"label.start-time"}
</label>
<Flatpickr
name="eventAgenda.start"
className="py-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
options={{
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
}}
/>
</div>
{/* Agenda End */}
<div>
<label
htmlFor="text"
className="block py-2 text-sm font-medium text-gray-900 dark:text-white"
>
{"label.end-time"}
</label>
<Flatpickr
name="eventAgenda.end"
className="py-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
options={{
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
}}
/>
</div>
</div>
{/* Event Agenda Descriptions */}
<EVSTextArea
t={t}
label="label.agenda-descriptions"
name="eventAgenda.descriptions"
placeholder="label.agenda-descriptions"
className="md:col-span-2"
rows={3}
/>
</div>
</div>
</div>
</div>
</div>
And this
function initModal() {
const $modalElementAdd = document.querySelector("#modalEl") as HTMLElement;
const modalOptions: ModalOptions = {
placement: "center",
backdrop: "dynamic",
backdropClasses:
"bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40",
closable: true,
};
return {
$modalElementAdd,
modalOptions,
};
}
function handleClickAdd() {
const modalOptions = initModal().modalOptions;
const $modalElementAdd = initModal().$modalElementAdd;
const modal: ModalInterface = new Modal($modalElementAdd, modalOptions);
modal.show();
}
I have used z-50 for backdrop and main content of modal but it block all screen, what i ask is, how to set this modal as the first layer on the screen when button was clicked?
