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 :
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 :
* {margin:0; padding: 0;} body {font-family: Arial, Helvetica, sans-serif;} /* Tombol Button Pesan */ #button {margin: 5% auto; width: 100px; text-align: center;} #button a { width: 100px; height: 30px; vertical-align: middle; background-color: #F00; color: #fff; text-decoration: none; padding: 10px; border-radius: 5px; border: 1px solid transparent; } /* Jendela Pop Up */ #popup { width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,.7); top: 0; left: 0; z-index: 9999; visibility: hidden; } .window { width: 400px; height: 100px; background: #fff; border-radius: 10px; position: relative; padding: 10px; text-align: center; margin: 15% auto; } .window h2 { margin: 30px 0 0 0; } /* Button Close */ .close-button { width: 6%; height: 20%; line-height: 23px; background: #000; border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; color: #fff; text-decoration: none; position: absolute; top: -10px; right: -10px; } /* Memunculkan Jendela Pop Up*/ #popup:target { visibility: visible; }
Untuk Melihat Hasil nya, DISINI
Update Terus Blog Mexious, dan Dapatkan Terus Informasi Menarik Seputar Dunia IT
Wassalamualaikum wr.wb
Share This :