Cara Membuat PopUps Website Keren Responsive

Cara Membuat PopUps Website Keren Responsive

Hai Selamat pagi sobat,
Kali ini saya akan Share tentang PopUps yang keren untuk website kalian,
Bagi yang sering menggunakan notif, ini sangatlah cocok untuk kalian

Dan tampilannya seperti diatas atau dibawah ini :

Bagaimana ?
Keren pasti hehe..

Bahan :   KLIK DISINI

• Aler.Css
• Alert.Js

Setelah download, kedua script diatas jadikan satu folder di website
Kemudian Edit file website kalian index/apapun itu yang ingin kalian beri PopUps seperti diatas dengan cara :

<!-- bagian popup -->
 <div class="popup">
 <div id="box">
 
        <!-- This is what you need -->
           <script src="Folder_Tempat_Script_Kalian/Alert.js"></script>
           <link rel="stylesheet" href="Folder_Tempat_Script_Kalian/Alert.css">
        <!--.......................-->
 
 <ul class="JCFT">

 

 <li class="success">
  <div class="ui">
   <p>A success message!</p>
   <button>Click Here</button>
  </div>
  
 </li>

 

</ul>

<script>

document.querySelector('ul.JCFT li.success button').onclick = function(){
 swal("THANKS YOU!", "Thanks to Visit!", "success");
};

</script>

 </div> 
 </div>
<!-- akhir dari popup -->

Keterangan :
Hijau = Untuk menandai tempat script kalian agar mudah saat dicari.
Highlight = Tempat dimana kalian meletakan Alert.Css dan Alert.Js yang sebelumnya diatas sudah kalian download.
Kuning = Kalian Bisa edit sesuai selera kalain.

Bagaimana ?
Mudah bukan..


Baca Juga : Cara Redirect Dan Auto Refresh Website


Mungkin cukup sekian.
Semoga Artikel saya ini dapat bermanfaat bagi kalian yang mencari Cara Membuat PopUps Keren
Apabila ada kekurangannya mohon dimaklumi.
Sekian Terimakasih.

PERLU DIKETAHUI

Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :

• Nama Iklan
• Alamat Screenshoot(Gambar) Iklan