Artikel ini menjelaskan metode implementasi lengkap dari pop-up JS yang dapat dibatalkan dan lapisan div tertutup. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> js muncul lapisan div yang dapat diseret dan ditutup </iteme>
<tyle>
html, tubuh {tinggi: 100%; overflow: tersembunyi;}
tubuh, div, h2 {margin: 0; padding: 0;}
tubuh {font: 12px/1.5 tahoma;}
tengah {padding-top: 10px;}
Tombol {kursor: pointer;}
#win {position: absolute; atas: 50%; kiri: 50%; lebar: 400px; tinggi: 200px; latar belakang: #ffff; Border: 4px solid #f90; margin: -102px 0 0 -202px; Tampilan: Tidak Ada;}
h2 {font-size: 12px; tinggi: 18px; teks-align: kanan; latar belakang: #fc0; border-bottom: 3px solid #f90; padding: 5px; kursor: pindahkan;}
h2 span {color:#f90; kursor: pointer; latar belakang: #fff; border: 1px solid#f90; padding: 0 2px;}
</tyle>
<script>
window.onload = function ()
{
var owin = document.getElementById ("win");
var obtn = document.geteLementsbyTagname ("tombol") [0];
var oclose = document.geteLementById ("tutup");
var oh2 = owin.getElementsbyTagname ("h2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.onClick = function ()
{
owin.style.display = "block"
};
oClose.onClick = function ()
{
owin.style.display = "none"
};
oclose.onmousedown = fungsi (acara)
{
(acara || window.event) .cancelbubble = true;
};
oh2.onmousedown = fungsi (acara)
{
var event = event || window.event;
bdrag = true;
disx = event.clientx - owin.offsetleft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
mengembalikan false
};
document.onmouseMove = fungsi (acara)
{
if (! bdrag) kembali;
var event = event || window.event;
var il = event.clientx - disx;
var it = event.clienty - disy;
var maxl = document.documentelement.clientwidth - owin.offsetWidth;
var maxt = document.documentelement.clientHeight - owin.offsetheight;
il = il <0? 0: il;
il = il> maxl? Maxl: IL;
itu = itu <0? 0: itu;
itu = itu> maxt? maxt: itu;
owin.style.margintop = owin.style.marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
mengembalikan false
};
document.onmouseup = window.onblur = oh2.onlosecapture = function ()
{
bdrag = false;
oh2.releasecapture && oh2.releasecapture ();
};
};
</script>
</head>
<body>
<Div id = "win"> <h2> <span id = "tutup"> × </span> </h2> </div>
<senter> <button> Lapisan Pop </button> </denter>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.