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>