Modal

<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>

<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>

<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>