Template:Modal: Difference between revisions

Content deleted Content added

Inline

Revision as of 21:54, 12 December 2024

Usage:

Open modal

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Modal content	`content`	no description	Content	required
hide toggle button	`no toggle`	no description	Boolean	suggested
button text	`button text`	no description	String	suggested
modal unique ID (if using multiple modals)	`target`	no description	String	suggested
aditional class button	`aditional class button`	no description	String	suggested
button-color	`button-color`	no description	Unknown	optional
modal header	`modal header`	no description	Unknown	optional
empty header	`empty header`	no description	Unknown	optional
modal close text	`modal close text`	no description	Unknown	optional
accept	`accept`	no description	Unknown	optional
gray button	`gray button`	no description	Unknown	optional
gray button action	`gray button action`	no description	Unknown	optional
gray button class	`gray button class`	no description	Unknown	optional
transition	`transition`	no description Suggested values `yes`	String	suggested
blue button	`blue button`	no description	Unknown	optional
Width of modal	`width`	no description Suggested values `20` `24` `28` `32` `36` `40` `44` `48` `52` `56` `60` `64` `72` `80` `96` `xs` `sm` `md` `lg` `xl` `2xl` `3xl` `4xl` `5xl` `6xl` `7xl` `full` `min` `max` `fit` `prose` `screen-sm` `screen-md` `screen-lg` `screen-xl` `screen-2xl`	String	optional
modal-class	`modal-class`	no description	Unknown	optional
close icon	`close icon`	no description	Unknown	optional

@@ Line 11: / Line 11: @@
 {{#if:{{{no toggle|}}}||<!-- Modal toggle -->
 {{flow button|text={{{button text|Open modal}}}|action=modal|target={{{target|default-modal}}}|class={{{aditional class button|}}}|color-blue={{{button-color|yes}}}|dispaly=inline}} }}<!--
-Main modal --><div id="{{{target|default-modal}}}" tabindex="-1" aria-hidden="true" class="modal hidden {{#if:{{{transition|}}}|opacity-transition}} overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out">
+Main modal --><div id="{{{target|default-modal}}}" tabindex="-1" aria-hidden="true" class="modal hidden {{#if:{{{transition|}}}|opacity-transition}} overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out">
 <div class="relative p-4 w-full max-w-{{{width|2xl}}} max-h-full">
 <!-- Modal content -->