Modal
Default Modal
html
typescript
<button
flowbiteButton
[ngpDialogTrigger]="dialog">
Modal
</button>
<ng-template
#dialog
let-close="close">
<div flowbiteModalOverlay>
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>Open programatically
html
typescript
<button
flowbiteButton
(click)="onClick()">
Trigger modal
</button>
<ng-template
#dialog
let-close="close">
<div flowbiteModalOverlay>
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>Positioned modal
html
typescript
<button
flowbiteButton
[ngpDialogTrigger]="dialog">
Modal
</button>
<ng-template
#dialog
let-close="close">
<div
flowbiteModalOverlay
position="top-left">
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>Themes
Modal content
{
"host": {
"base": "block space-y-6 p-6",
"transition ": ""
}
}Modal footer
{
"host": {
"base": "flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600",
"transition ": ""
}
}Modal header
{
"host": {
"base": "items-center justify-between rounded-t border-b border-gray-200 p-5 text-xl font-medium text-gray-900 dark:border-gray-600 dark:text-white",
"transition ": ""
}
}Modal overlay
{
"host": {
"base": "fixed inset-0 flex bg-gray-900/50 p-4 dark:bg-gray-900/80",
"transition ": "",
"position": {
"top-left": "items-start justify-start",
"top-center": "items-start justify-center",
"top-right": "items-start justify-end",
"center-left": "items-center justify-start",
"center": "items-center justify-center",
"center-right": "items-center justify-end",
"bottom-left": "items-end justify-start",
"bottom-center": "items-end justify-center",
"bottom-right": "items-end justify-end"
}
}
}Modal
{
"host": {
"base": "h-max w-full rounded-lg bg-white shadow dark:bg-gray-700",
"transition ": "",
"size": {
"sm": "max-w-md",
"md": "max-w-lg",
"lg": "max-w-4xl",
"xl": "max-w-7xl"
}
}
}