كيفية تنفيذ صندوق القناع منبثق

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

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

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

انسخ الرمز على النحو التالي: <style>

#h-dialog {display: none ؛ الموضع: absolute ؛ z-index: 999999 ؛ العرض: 400px ؛ الارتفاع: auto ؛ لون الخلفية: #fff ؛}

#h-dialog .close {float: right ؛ font-size: 30px ؛ margin-right: 10px ؛ margin-top: 5px ؛ cursor: pointer ؛}

#h-dialog .title {height: 40px ؛ padding-left: 10px ؛ حجم الخط: 20 بكسل ؛ ارتفاع الخط: 40 بكسل ؛}

#h-dialog #MSGCONT {height: 36px ؛ الهامش: 30px 0 50px ؛ padding-left: 65px ؛ حجم الخط: 25px ؛ خط الارتفاع: 36px ؛ محاذاة رأسية: الأوسط ؛ الخلفية: url (../ images/ui_alert.png) no-repeat 20px 50 ٪ ؛}

</style>

<div id = "h-dialog">

<a onClick = "popupclose (this)"> × </a>

<div> نصيحة </div>

<div id = "msgcont"> المحتوى </div>

</div>

<script type = "text/javaScript">

// قفل شاشة الخلفية

وظيفة القفل () {

var clienth = document.body.offsetheight ؛ // ارتفاع الجسم

var clientw = document.body.offsetWidth ؛ // عرض الجسم

var doch = document.body.scrollheight ؛ // ارتفاع المتصفح

var docw = document.body.scrollwidth ؛ // عرض المتصفح

var bgw = clientw> docw؟ ClientW: docw ؛ // احصل على العرض الصحيح

var bgh = clienth> doch؟ ClientH: Doch ؛ // احصل على أعلى مستوى صالح

var Blackbg = document.createElement ("div") ؛

Blackbg.id = "Blackbg" ؛

Blackbg.Style.position = "absolute" ؛

Blackbg.style.zindex = "99999" ؛

Blackbg.style.top = "0" ؛

Blackbg.style.left = "0" ؛

Blackbg.style.width = bgw+"px" ؛

Blackbg.style.height = bgh+"px" ؛

Blackbg.Style.Opacity = "0.4" ؛

Blackbg.style.backgroundColor = "#333" ؛

document.body.appendchild (BlackBG) ؛

}

// إغلاق الحدث الزر

وظيفة popupclose (el) {

var Blackbg = document.getElementById ("Blackbg") ؛

Blackbg && document.body.removechild (Blackbg) ؛

el.parentnode.style.display = "none" ؛

}

// نشأ

وظيفة Autoclose (id) {

id = id || "H-Dialog" ؛

var Blackbg = document.getElementById ("Blackbg") ؛

var objdiv = document.getElementById (id) ؛

setTimeout (function () {

Blackbg && document.body.removechild (Blackbg) ؛

objdiv.style.display = "none" ؛

} ، 2000) ؛

}

/**

*الوظيفة: معلومات منبثقة

* المعلمة 1: محتوى معلومات موجه

* المعلمة 2: حالة معلومات المطالبة الافتراضية هي 0. معلومات المطالبة هي 1. معلومات النجاح هي

* المعلمة 3: معرف Div المنبثق ، الافتراضي "H-Dialog"

* المعلمة 4: معرف محتوى النافذة المنبثقة ، الافتراضي "msgcont"

**/

دالة showmsg (msg) {

msg = msg || "يرجى إعادة فتح" ؛

var status = وسيطات [1] || 0 ،

popupid = وسيطات [2] || "H-Dialog" ،

contentId = وسيطات [3] || "msgcont" ؛

lockscreen () ؛

// الارتفاع الفعلي وعرض الشاشة

var pagewidth = window.innerwidth ؛

var pageheight = window.innerheight ؛

if (typeof pagewidth! = "number") {

if (document.compatmode == "CSS1COMPAT") {

pageWidth = document.documentElement.ClientWidth ؛

pageheight = document.documentElement.clientheight ؛

} آخر {

pageWidth = document.body.clientwidth ؛

pageheight = document.body.clientheight ؛

}

}

// شريط التمرير له ارتفاع وعرض

var scrollleft = window.document.documentElement.scrollleft ؛

var scrolltop = 0 ؛

if (typeof window.pageyoffset! = 'undefined') {

scrolltop = window.pageyoffset ؛

} آخر إذا (typeof window.document.compatmode! = 'undefined' &&

window.document.compatmode! = 'backcompat') {

scrolltop = window.document.documentElement.scrolltop ؛

} آخر إذا (typeof window.document.body! = 'undefined') {

scrolltop = window.document.body.scrolltop ؛

}

var div_x = (pageWidth - 400) / 2 + scrollleft ؛

var div_y = (pageheight - 200) / 2 + scrolltop ؛

var objdiv = document.getElementById (popupid) ؛

إذا (الحالة) {

document.getElementById (contentId) .style.background = "url ($ root/assets/images/ui_success.png) no-repeat 20px 50 ٪" ؛

}

document.getElementById (contentId) .innerhtml = msg ؛

objdiv.style.display = "block" ؛

objdiv.style.left = div_x + "px" ؛

objdiv.style.top = div_y + "px" ؛

AutoClose (popupid) ؛

}

</script>

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