บทความนี้อธิบายวิธีการใช้งานของกล่องพรอมต์ที่มุมล่างขวาของหน้าเว็บ JS และแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ วิธีการเฉพาะมีดังนี้:
ส่วนรหัส HTML มีดังนี้:
คัดลอกรหัสดังนี้: <style type = "text/css">
.Messagetip {ชายแดนขวา: #455690 1px Solid; ชายแดนด้านบน: #A6B4CF 1px Solid; ชายแดนซ้าย: #A6B4CF 1px Solid; ขอบด้านล่าง: #455690 1px Solid; z-index: 99999; ซ้าย: 0px; ด้านบน: 0px; ทัศนวิสัย: ซ่อน; ความกว้าง: 230px; ตำแหน่ง: สัมบูรณ์; ความเป็นมา:#cfdef4; TEXT-ALIGING: ซ้าย}
.Messagetip .close {ตำแหน่ง: สัมบูรณ์; ขวา: 0px; Font-Weight: ตัวหนา; Padding: 4px 4px 0 0;}
.Messagetip .close A {สี: สีแดง; ขนาดตัวอักษร: 12px; การตกแต่งข้อความ: ไม่มี;}
.Messagetip .Content {border-top: #FFFFFF 1px solid; ชายแดนซ้าย: #ffffff 1px solid}
.Messagetip .Content .title {สี: #1F336B; Padding-Top: 4px; Padding-Left: 4px; ความสูง: 22px;}
.Messagetip .Content .MSG {ชายแดนขวา: #B9C9EF 1PX SOLID; Border-Left: #728EB8 1PX SOLID; ชายแดนด้านบน: #728EB8 1px Solid; Padding: 10px; มาร์จิ้น: 1px}
</style>
<script type = "text/javascript" src = "/js/base.js"> </script>
<div id = "emeng">
<div> <a href = "javascript: msgtip.close ();"> × </a> </div>
<div>
<div> ระบบพรอมต์: </div>
<div>
เนื้อหา
</div>
</div>
</div>
ส่วนรหัส JS มีดังนี้:
คัดลอกรหัสดังนี้: ฟังก์ชั่น messagetip (pjso) {
_.init (นี่, pjso, {
ชื่อ: 'msg' // id แท็กกล่องพรอมต์
-
this.emsg = document.getElementById (this.name);
-
messagetip.prototype =
-
// กล่องพรอมต์อยู่ที่มุมล่างขวาเสมอ
การเปลี่ยนตำแหน่ง: ฟังก์ชั่น (_this) {
var divheight = parseint (_this.emsg.offsetheight, 10);
var divwidth = parseint (_this.emsg.offsetWidth, 10);
var dOCWIDTH = document.body.clientWidth;
var docheight = document.body.clientheight;
_this.emsg.style.top = docheight - divheight + parseint (document.body.scrolltop, 10);
_this.emsg.style.left = DOCWIDTH - DIVWIDTH + PARSEINT (document.body.scrollleft, 10);
-
// กล่องพรอมต์ค่อยๆเพิ่มขึ้น
Movingiv: ฟังก์ชั่น (_this) {
-
ที่นี่คุณสามารถตั้งค่าให้ปิดหลังจากไม่กี่วินาที
-
-
พยายาม {
if (parseint (_this.emsg.style.top, 10) <= (_this.docheight - _this.divheight + parseint (document.body.scrolltop, 10))) {
window.clearinterval (_this.objtimer);
_this.objtimer = window.setInterval (function () {_this.reposition (_this);}, 1);
-
_this.divtop = parseInt (_this.emsg.style.top, 10);
_this.emsg.style.top = _this.divtop - 1;
-
จับ (e) {
-
-
// ปิดกล่องพรอมต์
ปิด: ฟังก์ชั่น () {
this.emsg.style.visibility = 'Hidden';
if (this.objtimer) window.clearinterval (this.objtimer);
-
// แสดงกล่องพรอมต์
แสดง: function () {
var divtop = parseint (this.emsg.style.top, 10);
this.divtop = divtop;
var divleft = parseint (this.emsg.style.left, 10);
var divheight = parseint (this.emsg.offsetheight, 10);
this.divheight = divheight;
var divwidth = parseint (this.emsg.offsetWidth, 10);
var dOCWIDTH = document.body.clientWidth;
var docheight = document.body.clientheight;
this.docheight = docheight;
this.emsg.style.top = parseint (document.body.scrolltop, 10) + docheight + 10;
this.emsg.style.left = parseint (document.body.scrollleft, 10) + DOCWIDTH - DIVWIDTH;
this.emsg.style.visibility = "มองเห็นได้";
var _this = this;
this.objtimer = window.setInterval (function () {_this.movediv (_this);}, 10);
-
-
var msgtip = new messagetip ({ชื่อ: 'emeng'});
window.onload = function () {msgtip.show (); -
window.onresize = function () {msgtip.reposition (msgtip); -
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน