Menggunakan animasi pembatalan javascript wajah

Komponen modal dapat digunakan sebagai dialog interaktif di atas area konten utama situs web untuk menampilkan pemberitahuan dan mengumpulkan informasi menggunakan elemen formulir dari pengguna situs web Anda

Mulailah dengan berbagai ukuran, warna, dan gaya yang dibuat dengan kelas utilitas dari Tailwind CSS dan komponen dari Flowbite

modal bawaan

Untuk membuat modal dengan Tailwind CSS, Anda hanya perlu menambahkan

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

Jika Anda ingin mengubah visibilitas, menampilkan, atau menyembunyikan modal, Anda dapat menggunakan atribut data berikut di mana nilainya adalah ID unik dari komponen modal

• 
  
    Toggle modal
  
  
  
  
      
  
          
          
  
              
              
  
                  
  
                      Static modal
                  
                  
                        
                  
              
  
              
              
  
                  
  
                      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.
                  
                  
  
                      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.
                  
              
  
              
              
  
                  I accept
                  Decline
              
          
  
      
  
  

  6 - alihkan modal

• 
  
    Toggle modal
  
  
  
  
      
  
          
          
  
              
              
  
                  
  
                      Static modal
                  
                  
                        
                  
              
  
              
              
  
                  
  
                      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.
                  
                  
  
                      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.
                  
              
  
              
              
  
                  I accept
                  Decline
              
          
  
      
  
  

  7 - tunjukkan modalnya

• 
  
    Toggle modal
  
  
  
  
      
  
          
          
  
              
              
  
                  
  
                      Static modal
                  
                  
                        
                  
              
  
              
              
  
                  
  
                      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.
                  
                  
  
                      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.
                  
              
  
              
              
  
                  I accept
                  Decline
              
          
  
      
  
  

  8 - tutup modal

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

Salinan

beralih modal

Ketentuan Layanan

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

  Toggle modal




    

        
        

            
            

                

                    Terms of Service
                
                
                    
                    Close modal
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

Modal statis

Gunakan atribut data

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

Salinan

beralih modal

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

munculan modal

Anda dapat menggunakan contoh modal ini untuk menampilkan dialog keputusan pop-up kepada pengguna Anda terutama saat menghapus item dan memastikan apakah pengguna benar-benar ingin melakukannya dengan konfirmasi ganda

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

elemen bentuk

Gunakan contoh modal ini dengan elemen input formulir untuk menerima informasi dari pengguna Anda dengan keuntungan tidak harus menautkan ke halaman lain tetapi mempertahankan pengguna di halaman yang sedang aktif. Contoh yang bagus adalah login atau formulir pendaftaran

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

Dompet kripto

Gunakan komponen modal web3 ini untuk menampilkan opsi koneksi dompet kripto seperti MetaMask atau WalletConnect saat membuat situs web berdasarkan autentikasi dan koleksi NFT

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

Salinan

Hubungkan dompet

Tutup modal

Terhubung dengan salah satu penyedia dompet kami yang tersedia atau buat yang baru

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

ukuran

Anda dapat menggunakan empat opsi ukuran modal yang berbeda mulai dari kecil hingga ekstra besar, namun perlu diingat bahwa lebar modal ini akan tetap sama saat menjelajah di perangkat yang lebih kecil

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

Salinan

Modal kecil Modal default Modal besar Modal ekstra besar

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

________sebelas_______

penempatan

Gunakan atribut data

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        




    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

Posisi default adalah tengah halaman

Alihkan tampilan penuh Alihkan tampilan tablet Alihkan tampilan seluler

Salinan

Kiri atas Kanan atas Kiri bawah Kanan bawah

Modal kiri atas

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

Modal kanan atas

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

modal kiri bawah

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

modal kanan bawah

Dengan waktu kurang dari sebulan sebelum Uni Eropa memberlakukan undang-undang privasi konsumen baru untuk warganya, perusahaan di seluruh dunia memperbarui persyaratan perjanjian layanan mereka untuk mematuhi

Peraturan Perlindungan Data Umum Uni Eropa (G. D. P. R. ) mulai berlaku pada tanggal 25 Mei dan dimaksudkan untuk memastikan seperangkat hak data bersama di Uni Eropa. Ini mengharuskan organisasi untuk memberi tahu pengguna sesegera mungkin tentang pelanggaran data berisiko tinggi yang dapat memengaruhi mereka secara pribadi

    
    
    Top left
    
    
    Top right
    
    
    Bottom left
    
    
    Bottom right
    




    

        
        

            
            

                

                    Top left modal
                
                
                    
                    Close modal
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    





    

        
        

            
            

                

                    Top right modal
                
                
                    
                    Close modal
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    





    

        
        

            
            

                

                    Bottom left modal
                
                
                    
                    Close modal
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    





    

        
        

            
            

                

                    Bottom right modal
                
                
                    
                    Close modal
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

perilaku javascript

Kelas Modal dari Flowbite dapat digunakan untuk membuat objek yang akan meluncurkan modal interaktif berdasarkan parameter objek, opsi, dan metode yang Anda pilih untuk diterapkan.

Parameter objek

Inisialisasi objek Modal dengan parameter seperti elemen modal dan objek opsi opsional

ParameterTypeRequiredDescription

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

Pilihan

Gunakan opsi berikut sebagai parameter kedua untuk objek Modal untuk mengatur posisi modal, kelas khusus untuk elemen backdrop dan fungsi callback

OptionTypeDescription

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal



    

        

            
                
                Close modal
            
            

                
                
Are you sure you want to delete this product?
                
                    Yes, I'm sure
                
                No, cancel
            

        

    

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

metode

Gunakan metode dari objek Modal untuk menampilkan, menyembunyikan, dan mengalihkan visibilitas langsung dari JavaScript

MethodDescription

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            
                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  Toggle modal




    

        
        

            
                
                Close modal
            
            

                
Sign in to our platform
                
                    

                        Your email
                        
                    
                    

                        Your password
                        
                    
                    

                        

                            

                                
                            




                            Remember me
                        

                        Lost Password?
                    

                    Login to your account
                    

                        Not registered? Create account
                    
                
            

        

    

 

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

Contoh

Lihat contoh JavaScript berikut untuk mempelajari cara menginisialisasi, menyetel opsi, dan menggunakan metode untuk objek Modal

Pertama-tama, buat objek elemen JavaScript baru untuk parameter pertama objek Modal dan objek opsi lainnya untuk mengatur penempatan, gaya tampilan latar, dan fungsi panggilan balik

// set the modal menu element
const $targetEl = document.getElementById('modalEl');

// options with default values
const options = {
  placement: 'bottom-right',
  backdrop: 'dynamic',
  backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
  closable: true,
  onHide: () => {
      console.log('modal is hidden');
  },
  onShow: () => {
      console.log('modal is shown');
  },
  onToggle: () => {
      console.log('modal has been toggled');
  }
};

Buat objek Modal baru berdasarkan opsi di atas

import { Modal } from 'flowbite';

/*
* $targetEl: required
* options: optional
*/
const modal = new Modal($targetEl, options);

Gunakan metode

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

// show the modal
modal.show();

// hide the modal
modal.hide();

Gunakan metode

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

Gunakan metode

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  
  Connect wallet




    

        
        

            
                  
                Close modal
            
            
            

                

                    Connect wallet
                
            

            
            

                
Connect with one of our available wallet providers or create a new one.
                

                    

                        
                            
                            MetaMask
                            Popular
                        
                    
                    

                        
                            
                            Coinbase Wallet
                        
                    
                    

                        
                            
                            Opera Wallet
                        
                    
                    

                        
                            
                            WalletConnect
                        
                    
                    

                        
                            
                            Fortmatic
                        
                    
                
                

                    
                        
                        Why do I need to connect with my wallet?
                
            

        

    

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

markup HTML

Gunakan kode HTML berikut untuk contoh JavaScript di atas

  Toggle modal




    

        
        

            
            

                

                    Static modal
                
                
                      
                
            

            
            

                

                    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.
                
                

                    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.
                
            

            
            

                I accept
                Decline
            
        

    

naskah

Jika Anda menggunakan konfigurasi TypeScript dari Flowbite maka Anda dapat mengimpor tipe untuk kelas Modal, parameter, dan opsinya