CSS+JavaScript
Prinsip Implementasi:
Buat div layar penuh, menggunakan posisi absolut, sehingga dapat dipisahkan dari aliran dokumen, tanpa mempengaruhi elemen lain, dan mengaturnya ke keadaan tembus cahaya. Tentu saja, transparansi ini dapat disesuaikan sesuka hati, dan membuat elemen login, yang juga menggunakan penentuan posisi absolut dan membuat nilai atribut indeks z-nya lebih besar dari div pada layar, dan pada saat ini tidak akan dicakup oleh div layar penuh. Dalam keadaan default, nilai atribut tampilan dari kedua div ini tidak ada. Saat mengklik tombol yang sesuai, mereka dapat mengubah nilai atribut tampilan mereka.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.VeVB.COM/" /> <title>How to pop up a full-screen gray-black transparent mask effect-Wulin.com</title> <style type="text/css"> * { margin:0px; padding: 0px; } .zhezhao {lebar: 100%; Tinggi: 100%; Latar Belakang:#000; filter: alpha (opacity = 50); -Moz-opacity: 0,5; Opacity: 0,5; Posisi: Absolute; Kiri: 0px; Atas: 0px; Tampilan: Tidak Ada; z-index: 1000; } .login {width: 280px; Tinggi: 180px; Posisi: Absolute; TOP: 200PX; Kiri: 50%; Latar Belakang:#000; margin-kiri: -140px; Tampilan: Tidak Ada; z-index: 1500; } .content {margin-top: 50px; Warna: Merah; Line-Height: 200px; Tinggi: 200px; Teks-Align: tengah; } </tyle> <script type = "text/javascript"> window.onload = function () {var zhezhao = document.geteLementById ("zhezhao"); var login = document.geteLementById ("login"); var bt = document.geteLementById ("bt"); var btclose = document.getElementById ("btclose"); bt.onClick = function () {zhezhao.style.display = "block"; login.style.display = "block"; } btclose.onClick = function () {zhezhao.style.display = "none"; login.style.display = "none"; }} </script> </head> <body> <Div id = "zhezhao"> </div> <div id = "login"> <tombol id = "btclose"> Klik untuk menutup </button> </div> <v> wulin.com Menyambut Anda, <tombol = "bt"> klik untuk pop up mask </Button> </Dive </Dive </Batt "Di atas mengimplementasikan fungsi topeng dasar. Saat mengklik untuk memunculkan topeng, suatu objek akan muncul. Saat mengklik untuk menutup, efek topeng akan hilang.
Javascript murni:
Efek Implementasi: Ketika sebuah jendela muncul, halaman di belakang jendela menjadi gelap dan tidak dapat dioperasikan.
Kesulitan: Karena lapisan div tidak dapat menutupi kontrol pilih, ada dua metode khusus: satu adalah menambahkan iframe di bawah jendela pop-up untuk menutupi pilih; Yang kedua adalah menyembunyikan kontrol pilih saat pop-up, dan pilih metode kedua di sini.
Prinsip Implementasi: Tambahkan lapisan tembus cahaya pada halaman dan tengah jendela pop-up untuk menimpa konten halaman.
Kode:
<script language = "javascript"> function open () {// Sembunyikan Pilih Kontrol DisplaySelect (0); // tunjukkan mask layer document.getElementById ("divpagemask"). Style.display = "block"; // Latih Lapisan Topeng Resizemask (); window.onresize = resizemask; // tunjukkan pop-up document.getElementById ("DivoPenwin"). Style.display = "block"; } function tutup () {// Tampilkan pilih Control DisplaySelect (1); // memproses lapisan mask divpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divoPenwin.style.display = "none"; window.onresize = null; document.getElementById ("DivoPenwin"). style.display = "none"; } // halaman fungsi mask resizeMask () {divpageMask.style.width = document.body.scrollwidth; divpagemask.style.height = document.body.scrollheight; divoPenwin.style.left = ((document.body.offsetwidth - divoPenwin.offsetwidth) / 2); divoPenwin.style.top = ((document.body.offsetheight - divoPenwin.offsetheight) / 2); } function displaySelect (val) {// Tampilkan dan sembunyikan Pilih Kontrol Var DisplayType; var arrdispalytype = ["tersembunyi", "terlihat"]; var arrobjselect = document.getElementsbyTagname ("pilih"); untuk (i = 0; i <arrobjselect.length; i ++) {arrobjselect [i] .style.visibility = arrdispalytype [val]; }} </script> <style type = "text/css"> .body, td {font-size: 12px} #divPagemask {latar belakang-color: white; filter: alpha (opacity = 50); kiri: 0px; Posisi: absolute; atas: 0px;} #divopenwin {latar belakang-warna: #eeeeee; Posisi: absolute; kiri: 0px; atas: 0px; Tampilan: Tidak Ada; Z-index: 50; Lebar: 300px; Tinggi: 150px} </style> <div id = "DivPageMask"> </div> <div id = "DivoPenwin"> <use> <a href = "javascript: tutup () </a tabel =" 0 center = "0 center =" 0 center = "0 center =" 0 center = "0 center =" 0 center = "0 CELLING =" CELTING = "COLD/CELTING </a" <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <TR> style = "Color:#666666; font-size: 13px"> </td> </tr> </tbody> </able> <table bgcolor = "#e1e1e1" cellpadding = "0" cellpacing = "1"> <tbody> <tr> <td align = "cellpacing =" 1 " cellPadding = 0 lebar = 600 style = "margin-top: 20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> Keywords: </td> <td> <input type> "name =" TIGT = "TIGN =" TIGT = "TIGT =" TIGT = "TIGT =" TIGT = "TIGT =" TIGT = "TEPLET =" TD " Lebar = 101> Lokasi: </td> <td align = Lebar tengah = 97 id = "cn"> <bahasa skrip = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp? type = kirim nilai = "Cari Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "tengah"> misalnya: restoran; peralatan; supermarket</table></td> </tr> </tbody> </table> </table> </table> </table> </center> <p align="center"></p> <p align="center"><a href="javascript:Open();">Open mask</a></p> <p align="center"></p> <table align="center" cellpadding="0" cellpacing="0"> <tbody> <!-- <tr> <td align="center" background="Images/Index/line_2.gif"><img src="Images/Index/line_2.gif"></td> </tr>--> <tr> <td align="center"><a href="#" target=_blank><font color = "#ff6600"> Promosi toko </a> | <a href = "#"> Tentang toko </a> | <a class = b href = "#" target = _blank> Kerjasama bisnis </a> | <a onClick = "this.style.behavior = 'url (#default#homePage)'; this.sethomepage ('http://www.sopull.com'); return false;" href = "http://www.sopull.com/#"> Set as HomePage </a> | <a onClick="javascript:window.external.addFavorite('http://www.sopull.com/','Soupu.com-China's largest store search engine')" href="http://www.sopull.com/#">Add to favorites</a> </td> </tr> <tr> <td align="center">©2007 Soupu.com Guangdong ICP No. 07006767 </td> </tr> </tbody> </able>