Svelte Popups - Flowbite Svelte Blocks

Get started with the popup component to overlay the main website content and showcase advertisement messages, cookie notices, and newsletter sign-ups.

Default popup #

Use this example of a popup element to show a simple yes or no type of dialog to your website visitor based on the Modal component from Flowbite.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex justify-center items-start h-80"><div id="info-popup" tabindex="-1" class="overflow-y-auto overflow-x-hidden z-50 md:inset-0 md:h-full"><div class="relative p-4 w-full max-w-lg h-full md:h-auto"><div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 md:p-8"><div class="mb-4 text-sm font-light text-gray-500 dark:text-gray-400" data-svelte-h="svelte-fmlttb"><h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Privacy info</h3> <p>The backup created with this export functionnality may contain some sensitive data. We suggest you to save this archive in a securised location.</p></div> <div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0"><a href="/" class="font-medium text-primary-600 dark:text-primary-500 hover:underline" data-svelte-h="svelte-ueiq2">Learn more about privacy</a> <div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:text-gray-400 dark:border-gray-700 focus-within:ring-gray-300 dark:focus-within:ring-gray-700 rounded-lg">Cancel</button>  <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus-within:ring-red-300 dark:focus-within:ring-red-900 rounded-lg">Confirm</button> </div></div></div></div></div> </div>
Svelte
<script lang="ts">
  import { Popup } from 'flowbite-svelte-blocks';
  import { Button } from 'flowbite-svelte';
</script>

<Popup>
  <div class="mb-4 text-sm font-light text-gray-500 dark:text-gray-400">
    <h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Privacy info</h3>
    <p>The backup created with this export functionnality may contain some sensitive data. We suggest you to save this archive in a securised location.</p>
  </div>
  <div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0">
    <a href="/" class="font-medium text-primary-600 dark:text-primary-500 hover:underline">Learn more about privacy</a>
    <div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0">
      <Button outline color="dark">Cancel</Button>
      <Button color="red">Confirm</Button>
    </div>
  </div>
</Popup>

Component data

Newsletter Sections

Portfolio