ตัวอย่างบทความนี้อธิบายถึงวิธีการใช้กล่องพรอมต์ที่มุมล่างขวาของ JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
ใช้ปลั๊กอิน jQuery (popup.js) ในกล่องพรอมต์ที่มุมล่างขวา
คัดลอกรหัสดังนี้: //en.fixed รหัสเข้ากันได้กับ IE6
// jQuery (ฟังก์ชั่น ($ j) {
// $ j ('#pop'). positionfixed ()
-
(ฟังก์ชั่น ($ j) {
$ j.positionfixed = function (el) {
$ j (el) .each (function () {
ใหม่คงที่ (นี่)
-
return el;
-
$ j.fn.positionfixed = function () {
ส่งคืน $ j.positionfixed (นี้)
-
var imped = $ j.positionfixed.impl = function (el) {
var o = สิ่งนี้;
o.sts = {
เป้าหมาย: $ j (el) .css ('ตำแหน่ง', 'แก้ไข'),
คอนเทนเนอร์: $ j (หน้าต่าง)
-
o.sts.currentcss = {
ด้านบน: o.sts.target.css ('top')
ขวา: o.sts.target.css ('ขวา')
ด้านล่าง: o.sts.target.css ('ล่าง')
ซ้าย: o.sts.target.css ('ซ้าย')
-
ถ้า (! o.ie6) กลับมา;
O.Bindevent ();
-
$ j.extend (fixed.prototype, {
IE6: $ .browser.msie && $ .browser.version <7.0,
bindevent: function () {
var o = สิ่งนี้;
o.sts.target.css ('ตำแหน่ง', 'สัมบูรณ์')
o.overrelative (). initbasepos ();
o.sts.target.css (O.Sts.basepos)
o.sts.container.scroll (o.scrollevent ()). resize (o.resizeEvent ());
O.SetPos ();
-
overrelative: function () {
var o = สิ่งนี้;
var relation = o.sts.target.parents (). ตัวกรอง (ฟังก์ชั่น () {
ถ้า ($ j (นี่) .css ('ตำแหน่ง') == 'ญาติ') ส่งคืนสิ่งนี้;
-
if (relative.size ()> 0) relative.fter (o.sts.target)
กลับมา;
-
initbasepos: function () {
var o = สิ่งนี้;
o.sts.basepos = {
ด้านบน: o.sts.target.offset (). ด้านบน - (o.sts.currentcss.top == 'auto'? o.sts.container.scrolltop (): 0),
ซ้าย: o.sts.target.offset (). ซ้าย - (o.sts.currentcss.left == 'auto'? o.sts.container.scrollleft (): 0)
-
กลับมา;
-
setpos: function () {
var o = สิ่งนี้;
o.sts.target.css ({
ด้านบน: o.sts.container.scrolltop () + o.sts.basepos.top,
ซ้าย: o.sts.container.scrollleft () + o.sts.basepos.left
-
-
Scrollevent: function () {
var o = สิ่งนี้;
return function () {
O.SetPos ();
-
-
resizeEvent: function () {
var o = สิ่งนี้;
return function () {
settimeout (function () {
o.sts.target.css (O.Sts.currentcss)
O.InitBasepos ();
O.SetPos ()
}, 1)
-
-
-
}) (jQuery)
jQuery (ฟังก์ชั่น ($ j) {
$ j ('#footer'). positionfixed ()
-
// ฟังก์ชั่นป๊อปอัพป๊อปอัพที่มุมล่างขวาของป๊อป
ฟังก์ชั่นป๊อป (ชื่อเรื่อง, url, อินโทร) {
this.title = title;
this.url = url;
this.intro = อินโทร;
this.apeartime = 1,000;
this.hidetime = 500;
this.delay = 10,000;
// เพิ่มข้อมูล
this.addinfo ();
//แสดง
this.showdiv ();
// ปิด
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: ฟังก์ชั่น (เวลา) {
if (! ($. browser.msie && ($. browser.version == "6.0") &&! $. support.style)) {
$ ('#pop'). slidedown (this.apeartime) .delay (this.delay) .fadeout (400) ;;
} else {// call jQuery.fixed.js แก้ปัญหาที่ IE6 ไม่สามารถใช้งานได้
$ ('#pop'). show ();
jQuery (ฟังก์ชั่น ($ j) {
$ j ('#pop'). positionfixed ()
-
-
-
closediv: function () {
$ ("#popclose") คลิก (ฟังก์ชัน () {
$ ('#pop'). ซ่อน ();
-
-
-
-
ตัวอย่างกล่องพรอมต์ที่มุมล่างขวา
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> หน้าต่างป๊อปอัพมุมล่างขวาล่าง </title>
</head>
<body>
<H2> โปรดดูว่าเบราว์เซอร์มีมุมล่าง </h2>
<!-เริ่มหน้าต่างป๊อปอัพ jQuery->
<script type = "text/javascript">
window.onload = function () {
var pop = ใหม่ป๊อป ("นี่คือชื่อเรื่องฮ่าฮ่า"
"URL ไฮเปอร์ลิงก์",
"โปรดป้อนการแนะนำเนื้อหาของคุณนี่คือการแนะนำเนื้อหาโปรดป้อนการแนะนำเนื้อหาของคุณนี่คือการแนะนำเนื้อหาโปรดป้อนการแนะนำเนื้อหาของคุณนี่คือการแนะนำเนื้อหา");
-
</script>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<script type = "text/javascript" src = "popup.js"> </script>
<div id = "pop" style = "display: none;">
<style type = "text/css">
*{} {margin: 0; padding: 0;}
#Pop {} {พื้นหลัง: #FFFF; WIDTH: 260PX; Border: 1PX SOLID #E0E0E0; FONT-SIZE: 12PX; ตำแหน่ง: แก้ไข; ขวา: 10PX; ด้านล่าง: 10PX;}
#pophead {} {line-height: 32px; พื้นหลัง: #f6f0f3; border-bottom: 1px solid #e0e0e0; ตำแหน่ง: ญาติ; ตัวอักษรขนาด: 12px; padding: 0 0 0 10px;};
#pophead H2 {} {font-size: 14px; color:#666; line-height: 32px; ความสูง: 32px;}
#pophead #popclose {} {ตำแหน่ง: Absolute; ขวา: 10px; top: 1px;}
#pophead a#popclose: hover {} {color:#f00; เคอร์เซอร์: pointer;}
#PopContent {} {padding: 5px 10px;}
#poptitle a {} {line-height: 24px; font-size: 14px; font-family: 'Microsoft Yahei'; สี:#333; Font-weight: bold; การกำหนดข้อความ: ไม่มี;}
#poptitle A: Hover {} {color:#f60;}
#popintro {} {text-indent: 24px; line-height: 160%; margin: 5px 0; สี:#666;}
#popmore {} {text-allign: ขวา; Border-top: 1px Dotted #CCC; LINE-HEIGHT: 24px; มาร์จิ้น: 8px 0 0 0 0;}
#popmore a {} {color:#f60;}
#Popmore A: Hover {} {color:#f00;}
</style>
<div id = "pophead">
<a id = "popclose"> ปิด </a>
<H2> การเตือนความจำอบอุ่น </h2>
</div>
<div id = "popcontent">
<Dl>
<dt id = "poptitle"> นี่คือชื่อเรื่อง </dt>
<dd id = "popintro"> นี่คือการแนะนำเนื้อหา </dd>
</dl>
<p id = "popmore"> ดู» </p>
</div>
</div>
<!-ปลายหน้าต่างป๊อปอัพป๊อปอัพ->
<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>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน