ตัวอย่างกล่องพรอมต์ที่มุมล่างขวาของหน้าเว็บ JS

บทความนี้อธิบายวิธีการใช้งานของกล่องพรอมต์ที่มุมล่างขวาของหน้าเว็บ 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); -

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน