تصف هذه المقالة طريقة تنفيذ الإطارات المنبثقة طبقة القناع بواسطة 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 للجميع.