إفادة
تتطلب قراءة هذه المقالة مجموعة أساسية و CSS و JavaScript
تصميم
فكرة تحقيق تأثير الطبقة المنبثقة بسيطة للغاية: إخفاء المحتوى المراد عرضه أولاً ، وعرض المحتوى المخفي في الأصل بعد تشغيل شرط معين (مثل النقر فوق زر).
ينجز
<! doctype html> <html> <head> <title> كائن نافذة </title> <meta charset = "utf-8" LightBlue ؛ الحدود: 1 بكسل خضراء صلبة ؛ " id = "toast"> <!-قم بتعيين سمة العرض على لا شيء لإخفاء المحتوى-> <p> هذا هو محتوى الطبقة المنبثقة </p> <button type = "button" id = "elut"> أغلق الطبقة المنبثقة </button> </div> <نصوص type = "text/javaScript"> var toast = document.getElementByid ( document.getElementById ("open"). onClick = function (e) {<!-تحديد حدث النقر لعرض المحتوى المخفي-> toast.style.display = "block" ؛ Toast.Style.position = "ثابت" ؛ var winwidth = window.innerwidth ؛ var winheight = window.innerheight ؛ var targetwidth = Toast.OffSetWidth ؛ var targetheight = toast.offsetheight ؛ Toast.Style.top = (winheight - targetheight) / 2 + "px" ؛ Toast.Style.Left = (WinWidth - TargetWidth) / 2 + "px" ؛ } document.getElementById ("close"). onClick = function (e) {<!-إخفاء المحتوى المعروض مرة أخرى-> toast.style.display = "none" ؛ } </script> </body> </html>تأثير العرض كما يلي:
ولكن يمكننا أن نلاحظ أنه بعد ظهور المحتوى المخفي ، لا يزال بإمكاننا إدخال صفحة Baidu من خلال الرابط. لمنع حدوث ذلك ، يمكننا توفير طبقة قناع لتغطية جميع محتوى الصفحة الأصلي. الرمز كما يلي:
<! doctype html> <html> <head> <title> كائن نافذة </title> <meta charset = "utf-8" لا شيء ؛ الموضع: ثابت ؛ العرض: 100 ٪ ؛ الطول: 100 ٪ ؛ أعلى: 0px ؛ اليسار: 0px ؛ الخلفية: رمادي ؛ "> <!-قناع الخلفية من خلال طبقة القناع-> <div style =" الخلفية: LightBlue ؛ الحدود: 1PX خضراء صلبة ؛ " id = "toast"> <!-قم بتعيين سمة العرض على لا شيء لإخفاء المحتوى-> <p> هنا هو محتوى الطبقة المنبثقة </p> <button type = "button" id = "elut"> أغلق الطبقة المنبثقة </button> </viv> </div> <script type = "text/javaScript"> var toast = document.getlementiid ("toast") ؛ var cover = document.getElementById ("cover") ؛ document.getElementById ("open"). onClick = function (e) {<!-حدد حدث النقر لعرض المحتوى المخفي-> cover.style.display = "block" ؛ Toast.Style.position = "ثابت" ؛ var winwidth = window.innerwidth ؛ var winheight = window.innerheight ؛ var targetwidth = Toast.OffSetWidth ؛ var targetheight = toast.offsetheight ؛ Toast.Style.top = (winheight - targetheight) / 2 + "px" ؛ Toast.Style.Left = (WinWidth - TargetWidth) / 2 + "px" ؛ } document.getElementById ("close"). onClick = function (e) {<!-إخفاء المحتوى المعروض مرة أخرى-> cover.style.display = "none" ؛ } </script> </body> </html>هذه هي نتيجة الاختبار التالية مرة أخرى ، كما هو موضح في الشكل أدناه:
لخص
يحمل المحتوى أعلاه ببساطة تأثير الطبقة المنبثقة ، ولكن عن طريق إضافة المزيد من التعليمات البرمجية ، يمكن تنفيذ وظائف أكثر تعقيدًا على هذا الأساس.
المثال البسيط أعلاه لاستخدام JavaScript لتحقيق تأثير الطبقة المنبثقة هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.