Pendahuluan
Dalam pelajaran ini, saya tidak akan mengungkapkan rahasia kepada desainer tata letak berpengalaman dan guru css, tetapi artikel ini akan berguna untuk pemula. ini adalah tempat Anda dapat mempelajari cara membuat munculan di atas seluruh situs.
Paling sering, jendela seperti itu muncul setelah melakukan tindakan tertentu di situs, misalnya, pengguna mengklik tautan "Minta panggilan balik" dan formulir pemesanan muncul di depannya.
Sangat nyaman untuk menggunakan jendela PopUp bersama dengan ajax, tapi ini adalah topik pelajaran lain.
Semakin banyak sumber daya web mulai muncul di jaringan yang menggunakan pop-up PopUp. Sebagai contoh, kami dapat memberi semua orang jejaring sosial yang dikenalnya.
Semua kelebihan data dari tangkapan layar dihapus.Vkontakte
Facebook
Twitter
Saya pikir ada cukup alasan untuk mulai mempelajari pertanyaan: bagaimana membuat munculan di situs Anda.
Pernyataan masalah (TOR)
Anda perlu membuat jendela sembul dengan layar peredupan di atas seluruh situs.
Solusi
Metode 1
html
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Hasil:
Sangat sering mereka menyarankan menggunakan:
position:absolute;
Ya, hasilnya serupa, tetapi karena kami telah mengatur ketinggian blok "peredupan", bilah gulir muncul. Itu sebabnya metode ini tidak cocok.
Metode 2
Metode ini tidak berbeda secara mendasar dari Metode 1, tetapi saya merasa lebih nyaman.
Html (tidak ada perubahan)
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
Css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Hasilnya serupa.
Karena properti:
min-height: 100%; blok "peredupan" kami telah memperoleh lebar 100% dan
tinggi minimum 100% layar.
Satu-satunya kelemahan dari metode ini adalah bahwa Internet Explorer hanya mendukung properti ini dari versi 8.0.
Menambahkan Sihir ke Jquery
Sekarang tambahkan tautan untuk menyembunyikan / menampilkan munculan kami.
Untuk melakukan ini, Anda perlu menghubungkan perpustakaan jQuery dan skrip kecil:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){
Anda juga perlu memperbarui Html:
<div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div>
Hasil
Sekarang ketika halaman dimuat, jendela sembulan PopUp akan hilang.
Jika kita mengklik tautan "Tampilkan popup", jendela sembulan akan muncul. Dan jika Anda mengklik tautan "Sembunyikan sembulan", jendela sembulan akan hilang lagi.
Hasilnya dapat dilihat di sini:
http://jsfiddle.net/p7NbX/15/