Cara Membuat Jendela Pop Up Sederhana Dengan HTML Dan CSS - Mexious Media | News, Media IT & Share Knowledge
BLANTERWISDOM101

Cara Membuat Jendela Pop Up Sederhana Dengan HTML Dan CSS

Tuesday, 12 September 2017


Assalamualaikum wr.wb

   Hai Sahabat Mexious, Kali Ini Saya Akan Share Cara Nih... Yaitu Membuat Pop Up, yang Sederhana nya Saja, Dengan HTML Dan CSS, Yuk Simak Langsung..




    Jendela Pop Up adalah jendela yang muncul secara otomatis dan tiba-tiba di depan layar aplikasi kita atau saat kita membuka website seseorang, Fungsi jendela Pop Up sendiri adalah untuk menyampaikan pesen yang berada di website kita atau website seseorang sebelum kita membuka halaman-halaman lain yang ada di website tersebut. Biasanya jendela Pop Up di buat dengan bantuan Plugin jQuery , tetapi semakin berkembangnya teknologi CSS jendela POP Up juga bisa di buat menggunakan CSS. Baiklah kita langsung saja praktek kan.


Pertama buatlah file HTML nya seperti di bawah ini :




  1. <div id="button"><a href="#popup">Pesan</a></div>
  2.    
  3.     <div id="popup">
  4.         <div class="window">
  5.                 <a href="#" class="close-button" title="Close">X</a>
  6.             <h2>Selamat Datang di Mexious Blog</h2>
  7.         </div>
  8.     </div>




Lalu teman-teman save dan lihat hasilnya. Masih belum jadi apa-apa kan teman-teman. Sekarang kita buat CSS nya seperti di bawah ini.

Pertama kita buat CSS nya untuk Button Pesannya seperti di bawah ini :



  1. * {margin:0; padding: 0;}
  2. body {font-family: Arial, Helvetica, sans-serif;}
  3. /* Tombol Button Pesan */
  4. #button {margin: 5% auto; width: 100px; text-align: center;}
  5. #button a {
  6.         width: 100px;
  7.         height: 30px;
  8.         vertical-align: middle;
  9.         background-color: #F00;
  10.         color: #fff;
  11.         text-decoration: none;
  12.         padding: 10px;
  13.         border-radius: 5px;
  14.         border: 1px solid transparent;
  15. }
  16. /* Jendela Pop Up */
  17. #popup {
  18.         width: 100%;
  19.         height: 100%;
  20.         position: fixed;
  21.         background: rgba(0,0,0,.7);
  22.         top: 0;
  23.         left: 0;
  24.         z-index: 9999;
  25.         visibility: hidden;
  26. }
  27. .window {
  28.         width: 400px;
  29.         height: 100px;
  30.         background: #fff;
  31.         border-radius: 10px;
  32.         position: relative;
  33.         padding: 10px;
  34.         text-align: center;
  35.         margin: 15% auto;
  36. }
  37. .window h2 {
  38.         margin: 30px 0 0 0;
  39. }
  40. /* Button Close */
  41. .close-button {
  42.         width: 6%;
  43.         height: 20%;
  44.         line-height: 23px;
  45.         background: #000;
  46.         border-radius: 50%;
  47.         border: 3px solid #fff;
  48.         display: block;
  49.         text-align: center;
  50.         color: #fff;
  51.         text-decoration: none;
  52.         position: absolute;
  53.         top: -10px;
  54.         right: -10px;  
  55. }
  56. /* Memunculkan Jendela Pop Up*/
  57. #popup:target {
  58.         visibility: visible;
  59. }


Nah Sudah Deh, Begitu Saja Code Pop Up nya, Fungsi Property CSS visibility: visible; di atas adalah untuk memunculkan jendela Pop Up saat kita klik Button Pesannya.

Untuk Melihat Hasil nya, DISINI

Update Terus Blog Mexious, dan Dapatkan Terus Informasi Menarik Seputar Dunia IT

Wassalamualaikum wr.wb




Share This :
Muhammad Rifky Abimayu

Author Mexious Media. Mexious Media merupakan sebuah organisasi yang bergerak dibidang dunia IT, terutama untuk para DevOps & Programmer. Kami juga membuat banyak applikasi, yaitu WHOIS Tools & FreeDDNS .

Mohon Berkomentar Untuk Sopan Dan Tidak Menggunakan Link Aktif