Contoh artikel ini menjelaskan cara mengimplementasikan kotak prompt di sudut kanan bawah JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Laksanakan plugin jQuery (popup.js) di kotak prompt di sudut kanan bawah
Salin kode sebagai berikut: //en.fixed kode yang kompatibel dengan IE6
// jQuery (function ($ j) {
// $ j ('#pop'). PositionFixed ()
//})
(function ($ j) {
$ j.positionfixed = function (el) {
$ j (el) .each (function () {
diperbaiki baru (ini)
})
mengembalikan el;
}
$ j.fn.positionfixed = function () {
mengembalikan $ j.positionfixed (ini)
}
var tetap = $ j.positionfixed.impl = function (el) {
var o = ini;
o.sts = {
Target: $ j (el) .css ('posisi', 'tetap'),
Kontainer: $ j (jendela)
}
o.sts.currentcss = {
Top: o.sts.target.css ('atas'),
Kanan: o.sts.target.css ('kanan'),
Bawah: o.sts.target.css ('bawah'),
Kiri: o.sts.target.css ('kiri')
}
if (! o.ie6) kembali;
o.bindevent ();
}
$ j.extend (fixed.prototype, {
IE6: $ .browser.msie && $ .browser.version <7.0,
bindevent: function () {
var o = ini;
o.sts.target.css ('posisi', 'absolute')
o.overrelative (). initbasepos ();
o.sts.target.css (o.sts.basepos)
o.sts.container.scroll (o.scrollevent ()). Ubah Ulang (o.resizeEvent ());
o.setpos ();
},
Overrelative: function () {
var o = ini;
var relatif = o.sts.target.parents (). filter (function () {
if ($ j (this) .css ('position') == 'relatif') kembalikan ini;
})
if (relative.size ()> 0) relatif.after (o.sts.target)
kembali o;
},
initbasepos: function () {
var o = ini;
o.sts.basepos = {
Top: o.sts.target.offset (). Top - (o.sts.currentcss.top == 'Auto'? O.Sts.Container.ScrollTop (): 0),
Kiri: o.sts.target.offset (). Kiri - (o.sts.currentcss.left == 'Auto'? O.Sts.Container.Scrollleft (): 0)
}
kembali o;
},
setPos: function () {
var o = ini;
o.sts.target.css ({
Atas: o.sts.container.scrolltop () + o.sts.basepos.top,
Kiri: o.sts.container.scrollleft () + o.sts.basepos.left
})
},
scrollevent: function () {
var o = ini;
return function () {
o.setpos ();
}
},
RESIZEEVENT: function () {
var o = ini;
return function () {
setTimeout (function () {
o.sts.target.css (o.sts.currentcss)
o.initbasepos ();
o.setpos ()
}, 1)
}
}
})
}) (jQuery)
jQuery (function ($ j) {
$ j ('#footer'). PositionFixed ()
})
// fungsi pop-up pop di sudut kanan bawah pop
fungsi pop (judul, url, intro) {
this.title = judul;
this.url = url;
this.intro = intro;
this.apeartime = 1000;
this.hidetime = 500;
this.delay = 10000;
// Tambahkan informasi
this.addinfo ();
//menunjukkan
this.showdiv ();
//penutup
this.closediv ();
}
Pop.prototype = {
addInfo: function () {
$ ("#poptitle a"). attr ('href', this.url) .html (this.title);
$ ("#POPINTRO"). HTML (this.intro);
$ ("#Popmore A"). Attr ('href', this.url);
},
showdiv: function (time) {
if (! ($. browser.msie && ($ .browser.version == "6.0") &&! $. Support.style)) {
$ ('#pop'). Slidedown (this.apeartime) .delay (this.delay) .fadeout (400) ;;
} else {// hubungi jQuery.fixed.js, selesaikan masalah yang tidak dapat digunakan IE6
$ ('#pop'). Show ();
jQuery (function ($ j) {
$ j ('#pop'). PositionFixed ()
})
}
},
closediv: function () {
$ ("#popclose"). Klik (function () {
$ ('#pop'). Hide ();
}
);
}
}
Contoh kotak prompt di sudut kanan bawah
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> JQuery Lower Right Corner Pop-Up Window </iteme>
</head>
<body>
<H2> Silakan lihat browser memiliki sudut bawah </h2>
<!-Jendela pop-up jQuery mulai->
<type skrip = "Teks/JavaScript">
window.onload = function () {
var pop = pop baru ("Ini judulnya, haha",
"URL Hyperlink",
"Harap masukkan Pendahuluan Konten Anda, berikut adalah Pendahuluan Konten. Harap masukkan Pendahuluan Konten Anda, berikut adalah Pendahuluan Konten. Harap masukkan Pendahuluan Konten Anda, berikut adalah Pendahuluan Konten");
}
</script>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<script type = "text/javaScript" src = "popup.js"> </script>
<div id = "pop" style = "display: none;">
<type style = "text/css">
*{} {margin: 0; padding: 0;}
#pop {} {background: #ffff; lebar: 260px; border: 1px solid #e0e0e0; font-size: 12px; posisi: diperbaiki; kanan: 10px; bawah: 10px;}
#pophead {} {line-height: 32px; latar belakang: #f6f0f3; border-bottom: 1px solid #e0e0e0; posisi: relatif; font-ukuran: 12px; padding: 0 0 0 10px;}
#pophead h2 {} {font-size: 14px; color:#666; line-height: 32px; tinggi: 32px;}
#pophead #popclose {} {position: absolute; kanan: 10px; atas: 1px;}
#pophead a#popclose: hover {} {color:#f00; kursor: pointer;}
#popcontent {} {padding: 5px 10px;}
#poptitle a {} {line-height: 24px; font-size: 14px; font-family: 'microsoft Yahei'; warna:#333; font-weight: bold; Text-Decoration: none;}
#poptitle a: hover {} {color:#f60;}
#popIntro {} {Text-Indent: 24px; line-height: 160%; margin: 5px 0; warna:#666;}
#popmore {} {text-align: right; border-top: 1px bertitik #ccc; line-height: 24px; margin: 8px 0 0 0;}
#popmore a {} {color:#f60;}
#popmore a: hover {} {color:#f00;}
</tyle>
<Div id = "Pophead">
<a id = "popclose"> tutup </a>
<H2> Pengingat Hangat </h2>
</div>
<Div id = "PopContent">
<dl>
<dt id = "PopTitle"> Berikut adalah judul </dt>
<dd id = "PopIntro"> Ini adalah pengenalan konten </dd>
</ll>
<p id = "Popmore"> View »</p>
</div>
</div>
<!-Pop Pop-Up Window End->
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <b r/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br /> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> jQuery 右下角弹窗
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.