مثال على مربع المطالبة في الزاوية اليمنى السفلى من صفحة الويب JS

تصف هذه المقالة طريقة تنفيذ مربع المطالبة في الزاوية اليمنى السفلى من صفحة الويب JS ، ويتم مشاركتها معك للرجوع إليها. الطرق المحددة هي كما يلي:

جزء رمز HTML كما يلي:

انسخ الرمز كما يلي: <style type = "text/css">

.messagetip {الحدود اليمين: #455690 1px الصلبة ؛ أعلى الحدود: #A6B4CF 1PX الصلبة ؛ الحدود اليسار: #A6B4CF 1PX الصلبة ؛ Border-Bottom: #455690 1px Solid ؛ Z-index: 99999 ؛ اليسار: 0px ؛ أعلى: 0px ؛ الرؤية: مخفية ؛ العرض: 230 بكسل ؛ الموقف: مطلق ؛ الخلفية:#cfdef4 ؛ محاذاة النص: اليسار}

.messagetip .close {الموضع: مطلق ؛ اليمين: 0px ؛ خط الرصيف: جريئة ؛ الحشو: 4px 4px 0 0 ؛}

.messagetip .close a {color: Red ؛ font-size: 12px ؛ تخلص النص: لا شيء ؛}

.messagetip .Content {border-top: #ffffff 1px solid ؛ الحدود اليسرى: #ffffff 1px solid}

.messagetip .Content .title {color: #1f336b ؛ حشو أعلى: 4 بكسل ؛ حشو اليسار: 4 بكسل ؛ الارتفاع: 22px ؛}

.Messagetip .Content .MSG {الحدود اليمين: #B9C9EF 1PX Solid ؛ Lorder-Left: #728EB8 1PX Solid ؛ الحدود: #728EB8 1PX الصلبة ؛ الحشو: 10 بكسل ؛ الهامش: 1px}

</style>

<script type = "text/javaScript" src = "/js/base.js"> </script>

<div id = "emeng">

<viv> <a href = "javaScript: msgtip.close () ؛"> × </a> </viv>

<viv>

<Div> موجه النظام: </div>

<viv>

محتوى

</div>

</div>

</div>

جزء رمز JS كما يلي:

انسخ الرمز كما يلي: وظيفة messagetip (pjso) {

_.init (هذا ، pjso ، {

الاسم: 'msg' // معرف علامة مربع موجه

}) ؛

this.emsg = document.getElementById (this.name) ؛

}

messagetip.prototype =

{

// مربع المطالبة دائمًا في الزاوية اليمنى السفلية

إعادة وضع: وظيفة (_ هذا) {

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) ؛

} ،

// يرتفع المربع الموجه ببطء

quoveriv: وظيفة (_ هذا) {

/*

هنا يمكنك ضبطه على إيقاف تشغيله بعد بضع ثوانٍ

...

*/

يحاول {

if (parseint (_this.emsg.style.top ، 10) <= _this.docheight - _this.divheight + parseint (document.body.scrolltop ، 10))) {

window.clearinterval (_This.objtimer) ؛

-

}

_this.divtop = parseint (_This.emsg.style.top ، 10) ؛

_this.emsg.style.top = _this.divtop - 1 ؛

}

catch (e) {

}

} ،

// أغلق مربع المطالبة

إغلاق: function () {

this.emsg.style.vibility = 'Hidden' ؛

if (this.objtimer) window.clearinterval (this.objtimer) ؛

} ،

// إظهار مربع المطالبة

عرض: وظيفة () {

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.vibility = "مرئي" ؛

var _ this = this ؛

this.objtimer = window.setInterval (function () {_this.movediv (_this) ؛} ، 10) ؛

}

}

var msgtip = new messagetip ({name: 'emeng'}) ؛

window.onload = function () {msgtip.show () ؛ } ؛

window.onresize = function () {msgtip.reposition (msgtip) ؛ } ؛

آمل أن تكون هذه المقالة مفيدة لبرمجة الويب للجميع.