Klik Efek Lapisan Pop & AMP;

Penulis：Eve Cole Waktu Pembaruan：2025-03-01 03:32:01

Salin kode kode sebagai berikut:

<Html>

<head>

<title> Efek Khusus Web Efek Khusus-Window-Efek Latar Belakang Web Setelah Jendela Pop-Up Menjadi Darker </iteme>

<!-Tambahkan kode berikut ke antara <head> dan </head>->

.Black_overlay {Display: None; Opacity: .80;

.White_content {Tampilan: Tidak ada; Overflow: otomatis;}

</tyle>

</head>

<body>

<!-Tambahkan kode berikut ke antara <tody> dan </body>->

Klik di sini untuk membuka jendela </a>

Tutup </a>

<br> konten jendela

</div>

</body>

</html>

Contoh 2:

Salin kode kode sebagai berikut:

<iteme> halaman non -title </iteme>

Fungsi hid ()

{{

var div4 = document.geteLementById ("div1");

div4.style.display = "block";

Div4.style.width = "200px";

Div4.style.head = "150px";

div4.style.zindex = "9999";

div4.style.top = "43%";

div4.style.left = "43%";

div4.style.position = "absolute";

var div3 = document.geteLementById ("div2");

div3.style.display = "block";

Div3.style.width = "1000px";

div3.style.zindex = "9998";

div3.style.position = "absolute";

div3.style.head = document.body.offsetheight;

div3.style.top = "0px";

div3.style.left = "0px";

}

Fungsi vis ()

{{

var div4 = document.geteLementById ("div1");

div4.style.display = "none";

var div3 = document.geteLementById ("div2");

div3.style.display = "none";

div3.style.width = "0px";

Div3.style.head = "0px";

Div4.innerHtml = "<a onClick = 'vis ()' style = 'display: block' id = 'text'> klik untuk menutup </a> <br /> <input name = 'textbox2' type = 'text' id = 'textbox2' /> <br /> <input id = 'button3' type = 'tombol' value = 'Tombol' ontClick = 'return button3_onClick () ";

}

</script>

</head>

<body>

<!-dwlayouttable->

<tr>

<a OnClick = "hid ()"> Klik untuk menampilkan </a> <br />

<a onClick = "vis ()" style = "display: block" id = "text"> klik untuk menutup </a> <br />

<br />

<Asp: TextBox ID = "TextBox2" Runat = "Server"> < /asp: TextBox> <br />

</div>

</form> </td>

</tr>

</boable>

</div>

</body>

</html>

Contoh 3:

Salin kode kode sebagai berikut:

<head>

<title> klik efek pop -up Layer </iteme>

<tyle>

* {margin: 0;}

Body {font-size: 12px;}

#Container div {margin-top: 5px;}

#Select_city h3 {float: left;}

#main_city,#all_province {clear: keduanya;}

#Main_city Div,#all_province div {width: 600px;

#Main_city h4,#all_province h4 {float: left;

#Main_city div span,#all_provring div

#Float_lay {width: 200px;

</tyle>

// lapisan pop

Fungsi OpenLayer (objid, conid) {

var arraypageSize = getPageSize ();

var arraypagescroll = getPagesCroll ();

if (! document.geteLementById ("popupaddr") {) {

// Buat lapisan konten pop -up

var pospdiv = document.createElement ("div");

// Atur atribut dan gaya ke elemen ini

PopupDiv.setAttribute ("ID", "Popupaddr")

popupdiv.style.position = "absolute";

popupdiv.style.border = "1px solid #ccc";

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Buat lapisan latar belakang pop -up

var bodyback = document.createElement ("div");

Bodyback.setTattribute ("id", "Bodybg")

bodyback.style.position = "absolute";

bodyback.style.width = "100%";

Bodyback.style.head = (arraypagesize [1] + 35 + 'px');

bodyback.style.zindex = 98;

bodyback.style.top = 0;

bodyback.style.left = 0;

bodyback.style.filter = "alpha (opacity = 50)";

bodyback.style.opacity = 0,5;

bodyback.style.background = "#ddf";

// Implementasikan POP -UP (setelah memasukkan elemen target)

var mybody = document.geteLementById (objid);

InsertAft (PopupDiv, Mybody);

InsertAfter (Bodyback, Mybody);

}

// Tampilkan lapisan latar belakang

document.geteLementById ("Bodybg").

// Tampilkan lapisan konten

var postobj = document.geteLementById ("popupaddr")

pos.innerHtml = document.getElementById (conf) .innerhtml;

pos.style.display = "";

// Biarkan lapisan pop -up secara vertikal kiri dan kanan di halaman (Unified)

// popobj.style.width = "600px";

// popobj.

// Biarkan lapisan pop -up secara vertikal kiri dan kanan di halaman (kepribadian)

var arrayconsize = getConsize (conf)

pos.style.top = arraypagescroll [1] + (arraypagesize [3] -ArrayConsize [1]) / 2-50 + 'px';

pos.style.left = (arraypagesize [0] -ArrayConsize [0]) / 2 -30 + 'px';

}

// Dapatkan ukuran asli dari lapisan konten

Function getConsize (conf) {

var conobj = document.geteLementById (conf)

conobj.style.position = "absolute";

conobj.style.left = -1000+ "px";

conobj.style.display = "";

Var arrayconsize = [conobj.offsetwidth, connable

conobj.

Return arrayConsize;

}

Fungsi insertAfter (Newslement, targetElement) {// masukkan

var induk = targeteLement.parentnode;

If (parent.LastChild == TargetElement) {

Parent.AppendChild (Newslement);

}

kalau tidak {

Parent.insertbefore (Newslement, TargetElement.NextSibling);

}

// Dapatkan ketinggian rolling bar

function getPagesCroll () {

Var yscroll;

if (self.pageyoffset) {

yscroll = self.pageyoffset;

} Else if (document.documentedElement && document.documentlement.scroltop) {{{

yscroll = document.documentedlement.scrolltop;

} else if (document.body) {{

yscroll = document.body.scrolltop;

}

arraypagescroll = array baru ('', yscroll)

Return arraypagescroll;

}

// Dapatkan ukuran halaman yang sebenarnya

function getPageSize () {

var xscroll, yscroll;

if (window.innerheight && window.scrollmaxy) {{

xscroll = document.body.scrollwidth;

yscroll = window.innerheight + window.scrollmaxy;

} Else if (document.body.scrollheight> document.body.offsetheight) {

sscroll = document.body.scrollwidth;

yscroll = document.body.scrollheight;

} Kalau tidak {

xscroll = document.body.offsetWidth;

yscroll = document.body.offsetHeight;

}

var windowwidth, windowheight;

// var PageHeight, pagewidth;

if (self.innerheight) {

Windowwidth = self.innerwidth;

Windowheight = self.innerheight;

} Else if (document.documentedElement && document.documentlement.clientHeight) {

windowwidth = document.documentelement.clientwidth;

Windowheight = document.documentelement.clitingheight;

} else if (document.body) {{

windowwidth = document.body.clientwidth;

windowheight = document.body.clitingHeight;

}

Var pagewidth, pageHeight

if (yscroll <windowheight) {

payheight = windowheight;

} Kalau tidak {

payheight = yscroll;

}

if (xscroll <windowwidth) {

pagewidth = windowwidth;

} Kalau tidak {

pagewidth = xscroll;

}

Arraypagesize = array baru (pagewidth, pageHeight, windowwidth, windowheight)

Return arraypagesize;

}

// tutup lapisan pop -up

Function closelayer () {

document.getElementById ("Popupaddr").

Document.getElementById ("Bodybg").

Mengembalikan false;

}

</script>

</head>

<body>

<!-Konten lapisan pop-up pertama->

<Div id = "Tabtop-l"> <strong> Pengaturan Gaya </strong> </div>

<Div id = "tabtop-r" onclick = "closelayer ()"> <strong> tutup </strong> </div>

</div>

<Div id = "TabContent"> Tampilkan konten di sini </div>

</div>

<br>

<!-Konten lapisan pop-up kedua->

<div id = "tabtop-l2"> <strong style = "color: block"> Set prompts </strong> </div>

<div id = "tabtop-r2" onclick = "closelayer ()"> <strong style = "color: red"> tutup </strong> </div>

</div>

<p> Tampilkan konten cepat di sini "

<p> Tips 1

<p> Pengingat 2

</div>

<br>

1 <br>

<br>

<!-Konten lapisan pop-up ketiga->

<div id = "tabtop-l3"> <strong style = "color: red; font-size: 20px"> Demonstrasi gaya </strong> </div>

<Div id = "tabtop-r3" onclick = "closelayer ()"> <strong> tutup </strong> </div>

</div>

<div id = "tabcontent3"> Konten tampilan di sini </div>

</div>

</body>

</html>