Home>

Simple example of mask layer implemented by jquery (that is, the gray around the popup div cannot be operated)

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 <title>jquery mask layer</title>
 <style type="text/css">
   #bgdiv {background-color:#e3e3e3;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:1000px;opacity:0.5;filter:alpha (opacity=50);-moz-opacity:0.5;}
   #dialogdiv {position:absolute;width:400px;left:50%;top:50%;margin-left:-200px;height:auto;z-index:100;background-color:#fff;border:1px #8fa4f5 solid;padding:1px;}
   #dialogdiv h2 {height:25px;font-size:14px;background-color:#8fa4f5;position:relative;padding-left:10px;line-height:25px;}
   #dialogdiv h2 a {position:absolute;right:5px;font-size:12px;color:#000000}
   #dialogdiv .form {padding:10px;}
   #dialogdiv2 {position:absolute;width:400px;left:50%;top:50%;margin-left:-200px;height:auto;z-index:100;background-color:#fff;border:1px #8fa4f5 solid;padding:1px;}
   #dialogdiv2 h2 {height:25px;font-size:14px;background-color:#8fa4f5;position:relative;padding-left:10px;line-height:25px;}
   #dialogdiv2 h2 a {position:absolute;right:5px;font-size:12px;color:#000000}
   #dialogdiv2 .form {padding:10px;}
   #dialogdiv3 {position:absolute;width:400px;left:50%;top:50%;margin-left:-200px;height:auto;z-index:100;background-color:#fff;border:1px #8fa4f5 solid;padding:1px;}
   #dialogdiv3 h2 {height:25px;font-size:14px;background-color:#8fa4f5;position:relative;padding-left:10px;line-height:25px;}
   #dialogdiv3 h2 a {position:absolute;right:5px;font-size:12px;color:#000000}
   #dialogdiv3 .form {padding:10px;}
 </style>
 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <script language="javascript" type="text/javascript">
  function showdiv (thisobjid) {
     $("#bgdiv"). css ({display:"block", height:$(document) .height ()});
     var yscroll=document.documentelement.scrolltop;
     $("#" + thisobjid) .css ("top", "100px");
     $("#" + thisobjid) .css ("display", "block");
  document.documentelement.scrolltop=0;
   }
   function closediv (thisobjid) {
     $("#bgdiv"). css ("display", "none");
     $("#" + thisobjid) .css ("display", "none");
   }
 </script>
 </head>
 <body>
 <div></div>
 <!-Div1 displayed by the mask layer>
 <div>
  <h2>Popup layer<a href="#" onclick="closediv (" dialogdiv ")">Close</a></h2>
  <div>I am the popup dialog 111111! !!</div>
 </div>
 <!-Div2->displayed by the mask layer
 <div>
  <h2>Popup layer<a href="#" onclick="closediv (" dialogdiv2 ")">Close</a></h2>
  <div>I am a popup dialog 2222! !!</div>
 </div>
 < ;! --- div 3->displayed by the mask layer
 <div>
  <h2>Popup layer<a href="#" onclick="closediv (" dialogdiv3 ")">Close</a></h2>
  <div>I am the popup dialog 3333333! !!</div>
 </div>
  • Previous Detailed explanation of relation data query and statistical function usage in Yii
  • Next Summary of commonly used Module installation methods in Python