نسخ رمز رمز على النحو التالي:
<html>
<head>
<title> مؤثرات الويب الخاصة على Web-Window-تأثير خلفية الويب بعد أن تصبح النافذة المنبثقة أغمق </title>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
<!-أضف الكود التالي إلى بين <head> و </head>->
<type type = "text/css">
. العتامة: .80 ؛
. الفائض: Auto ؛}
</style>
</head>
<body>
<!-أضف الكود التالي إلى بين <body> و </body>->
<a href = "javaScript: void (0)" onClick = "document.getElementById ('light'). style.display = 'block' ؛ .Style.Display = 'block'">
انقر هنا لفتح النافذة </a>
<div id = "light">
<a href = "javaScript: void (0)" onClick = "document.getElementById ('light'). style.display = 'none' ؛ tyle.display = 'none'">
أغلق </a>
<br> محتوى النافذة
</div>
<div id = "fade"> 123 </iv>
</body>
</html>
مثال 2:
نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<TITLE> صفحة غير موجودة </title>
<script language = "javaScript" type = "text/javaScript">
وظيفة Hid ()
{{
var div4 = document.getElementById ("div1") ؛
div4.style.display = "block" ؛
div4.style.width = "200px" ؛
div4.style.head = "150px" ؛
div4.style.zindex = "9999" ؛
div4.style.top = "43 ٪" ؛
div4.style.left = "43 ٪" ؛
div4.style.position = "absolute" ؛
var div3 = document.getElementById ("div2") ؛
div3.style.display = "block" ؛
div3.style.width = "1000px" ؛
div3.style.zindex = "9998" ؛
div3.style.position = "absolute" ؛
div3.style.head = document.body.offsetheight ؛
div3.style.top = "0px" ؛
div3.style.left = "0px" ؛
}
وظيفة vis ()
{{
var div4 = document.getElementById ("div1") ؛
div4.style.display = "none" ؛
var div3 = document.getElementById ("div2") ؛
div3.style.display = "none" ؛
div3.style.width = "0px" ؛
div3.style.head = "0px" ؛
div4.innerhtml = "<a onClick = 'vis ()' style = 'display: block' id = 'text'> انقر للإغلاق </a> <br /> <input id = 'textbox2' /> <br /> <input id = 'button3' type = 'button' value = 'button' onClick = 'return button3_onclick () "؛
}
</script>
</head>
<body>
<div align = "center">
<الجدول cellpadding = "0" cellspacing = "0">
<!-dwlayouttable->
<tr>
<td> <form id = "form1" runat = "server">
<a onClick = "Hid ()"> انقر لعرض </a> <br />
<div style = "اللون: أبيض ؛ خلفية اللون: الأخضر ؛ العرض:"
<a onclick = "vis ()" style = "display: block" id = "text"> انقر للإغلاق </a> <br />
<br />
<asp: textbox id = "textbox2" runat = "server"> < /asp: textbox> <br />
<input id = "button3" type = "button" value = "button" onClick = "return button3_onclick ()" /> </viv>
<div style = "filter: alpha (عتامة = 70) ؛ العرض: 1px ؛ الارتفاع: 8px ؛ خلفية اللون: #cccccc ؛ اليسار: 0px ؛ pum: top: 0px ؛ z-index: 9998 ؛ display: none ؛" id = "div2">
</div>
</form> </td>
</r>
</table>
</div>
</body>
</html>
مثال 3:
نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" /> />
<title> انقر فوق تأثير طبقة البوب -up </title>
<style>
* {الهامش: 0 ؛}
الجسم {font-size: 12px ؛}
#container div {margin-top: 5px ؛}
#select_city h3 {float: left ؛}
#main_city ،#all_province {clear: كلاهما ؛}
#main_city div ،#all_province div {width: 600px ؛
#main_city H4 ،#all_province H4 {float: Left ؛
#main_city div span ،#all_provring div
#float_lay {عرض: 1px ؛
</style>
<script type = "text/javaScript">
// طبقة البوب
وظيفة OpenLayer (objid ، conid) {
var arraypagesize = getPagesize () ؛
var arraypagescroll = getPagesCroll () ؛
if (! document.getElementById ("popupaddr") {) {
// إنشاء طبقة محتوى pop -up
var pospdiv = document.createElement ("div") ؛
// اضبط السمات والأنماط على هذا العنصر
popupdiv.setattribute ("id" ، "popupaddr")
popupdiv.style.position = "absolute" ؛
popupdiv.style.border = "1px Solid #CCC" ؛
popupdiv.style.background = "#fff" ؛
popupdiv.style.zindex = 99 ؛
// قم بإنشاء طبقة خلفية من موسيقى البوب
var bodyback = document.createElement ("div") ؛
Bodyback.SettAttribute ("ID" ، "BodyBG")
bodyback.style.position = "absolute" ؛
bodyback.style.width = "100 ٪" ؛
bodyback.style.head = (ArrayPagesize [1] + 35 + 'px') ؛
bodyback.style.zindex = 98 ؛
bodyback.style.top = 0 ؛
bodyback.style.left = 0 ؛
bodyback.style.filter = "alpha (عتامة = 50)" ؛
bodyback.style.Opacity = 0.5 ؛
bodyback.style.background = "#ddf" ؛
// تنفيذ pop -up (بعد إدخال العنصر الهدف)
var mybody = document.getElementById (objid) ؛
insertaft (popupdiv ، mybody) ؛
insertafter (bodyback ، mybody) ؛
}
// عرض طبقة الخلفية
document.getElementByid ("Bodybg").
// عرض طبقة المحتوى
var postobj = document.getElementById ("popupaddr")
pos.innerhtml = document.getElementById (conf) .innerhtml ؛
pos.style.display = "" ؛
// دع طبقة pop -up رأسياً اليسار واليمين في الصفحة (موحدة)
// popobj.style.width = "600px" ؛
// popobj.
// popobj.
// popobj.
// دع طبقة pop -up رأسياً اليسار واليمين في الصفحة (الشخصية)
var arrayConsize = getConsize (conf)
pos.style.top = ArrayPagesCroll [1] + (ArrayPagesize [3] -arrayConsize [1]) / 2-50 + 'px' ؛
pos.style.left = (ArrayPagesize [0] -arrayConsize [0]) / 2 -30 + 'px' ؛
}
// احصل على الحجم الأصلي لطبقة المحتوى
وظيفة getConsize (conf) {
var conobj = document.getElementById (conf)
conobj.style.position = "absolute" ؛
conobj.style.left = -1000+ "px" ؛
conobj.style.display = "" ؛
var arrayConsize = [conobj.offsetwidth ، connable
conobj.
إرجاع arrayconsize.
}
دالة insertafter (إخباري ، الهدف) {// إدراج
var parent = targetElement.ParentNode ؛
if (parent.lastchild == targetelement) {
Parent.AppendChild (Newslement) ؛
}
آخر {
parent.insertbefore (newslement ، targetelement.nextsibling) ؛
}
}
// احصل على ارتفاع شريط المتداول
وظيفة getPagesCroll () {
var yscroll ؛
if (self.pageyoffset) {
yscroll = self.pageyoffset ؛
} آخر إذا (document.documentedElement && document.documentlement.scroltop) {{{
yscroll = document.documentedlement.scrolltop ؛
} آخر إذا (document.body) {{
yscroll = document.body.scrolltop ؛
}
ArrayPagesCroll = صفيف جديد ('' ، yscroll)
إرجاع arraypagescroll ؛
}
// احصل على الحجم الفعلي للصفحة
وظيفة getPagesize () {
var xscroll ، yscroll ؛
if (window.innerheight && window.scrollmaxy) {{
xScroll = document.body.scrollwidth ؛
yscroll = window.innerheight + window.scrollMaxy ؛
} آخر إذا (document.body.scrollheight> document.body.offsetheight) {
sscroll = document.body.scrollwidth ؛
yscroll = document.body.scrollheight ؛
} آخر {
xScroll = document.body.offsetWidth ؛
yscroll = document.body.offsetheight ؛
}
var windowwidth ، windowheight ؛
// var pageheight ، pagewidth ؛
إذا (self.innerheight) {
windowwidth = self.innerwidth ؛
WindowHeight = self.innerheight ؛
} آخر إذا (document.documentedElement && document.documentlement.clientheight) {
WindowWidth = document.documentElement.ClientWidth ؛
WindowHeight = document.documentElement.clitingheight ؛
} آخر إذا (document.body) {{
WindowWidth = document.body.clientwidth ؛
WindowHeight = document.body.clitingheight ؛
}
var pagewidth ، pageHeight
if (yscroll <windowheight) {
payheight = WindowHeight ؛
} آخر {
payheight = yscroll ؛
}
if (xscroll <windowwidth) {
PageWidth = WindowWidth ؛
} آخر {
PageWidth = xScroll ؛
}
ArrayPagesize = صفيف جديد (PageWidth ، PageHight ، WindowWidth ، WindowHeight)
إرجاع arraypagesize ؛
}
// أغلق طبقة pop -up
وظيفة closeLayer () {
document.getElementByid ("popupaddr").
document.getElementById ("Bodybg").
العودة كاذبة
}
</script>
</head>
<body>
<input name = "input" id = "test" value = "style settings" type = "button" onClick = "OpenLayer ('test' ، 'test_con')" />
<!-أول محتوى طبقة منبثقة->
<div id = "test_con" style = "display: none">
<div id = "tab">
<div id = "tabtop">
<div id = "tabtop-l"> <strong> إعدادات النمط </strong> </div>
<div id = "tabtop-r" onClick = "closeLayer ()"> <strong> إغلاق </strong> </viv>
</div>
<div id = "tabContent"> عرض محتوى هنا </div>
</div>
</div>
<br>
<br>
<br>
<input name = "input" id = "test2" value = "style present" type = "button" onClick = "OpenLayer ('test2' ، 'test_con2')" />
<!-محتوى الطبقة المنبثقة الثانية->
<div id = "test_con2" style = "display: none">
<div id = "tab2">
<div id = "tabtop2">
<div id = "tabtop-l2"> <strong style = "color: block"> set proves </strong> </viv>
<div id = "tabtop-r2" onClick = "closeLayer ()"> <strong style = "color: red"
</div>
<div id = "tabConent2" style = "color: #dff ؛ الخلفية: #000">
<p> إظهار المحتوى الموجه هنا "
<p> نصائح 1
<p> تذكير 2
</div>
</div>
</div>
<br>
1 <br>
<br>
<input name = "input" id = "test3" value = "style demination" type = "button" onClick = "OpenLayer ('Test3' ، 'Test_Con3')" />
<!-محتوى الطبقة المنبثقة الثالثة->
<div id = "test_con3" style = "display: none">
<div id = "tab3">
<div id = "tabtop3">
<div id = "tabtop-l3"> <strong style = "color: red ؛ font-size: 20px"> عرض نمط </strong> </viv>
<div id = "tabtop-r3" onClick = "closeLayer ()"> <strong> إغلاق </strong> </viv>
</div>
<div id = "tabContent3"> محتوى الشاشة هنا </div>
</div>
</div>
</body>
</html>