jquery弹出层
1 <script language="javascript" type="text/javascript">
2
3 function hideView() {
4 $("#signup").hide();
5 $("#lean_overlay").fadeOut(200);
6 }
7
8 function ShowView() {
9 var sig = $("#signup").outerWidth();
10 var _3 = $("<div id='lean_overlay'></div>");
11 $("body").append(_3);
12 $("#signup").css(
13 {
14 "display": "block",
15 "position": "fixed",
16 "opacity": 0,
17 "z-index": 11000,
18 "left": 50 + "%",
19 "margin-left": -(sig / 2) + "px",
20 "top": "200" + "px",
21 "padding": "15px",
22 "-webkit-border-radius": "10px"
23
24 });
25 $("#lean_overlay").click(hideView);
26 $("#signup").fadeTo(200, 1);
27 $("#lean_overlay").fadeTo(200, 0.5);
28 }
29
30 </script>
31 <style type="text/css">
32 #lean_overlay
33 {
34 position: fixed;
35 z-index: 10000;
36 top: 0px;
37 left: 0px;
38 height: 100%;
39 width: 100%;
40 background: #000;
41 display: none;
42 }
43 #signup
44 {
45 width: 402px;
46 padding-bottom: 2px;
47 display: none;
48 background: #FFF;
49 border-radius: 5px;
50 -moz-border-radius: 5px;
51 -webkit-border-radius: 5px;
52 box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
53 -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
54 -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
55 }
56 </style>
2
3 function hideView() {
4 $("#signup").hide();
5 $("#lean_overlay").fadeOut(200);
6 }
7
8 function ShowView() {
9 var sig = $("#signup").outerWidth();
10 var _3 = $("<div id='lean_overlay'></div>");
11 $("body").append(_3);
12 $("#signup").css(
13 {
14 "display": "block",
15 "position": "fixed",
16 "opacity": 0,
17 "z-index": 11000,
18 "left": 50 + "%",
19 "margin-left": -(sig / 2) + "px",
20 "top": "200" + "px",
21 "padding": "15px",
22 "-webkit-border-radius": "10px"
23
24 });
25 $("#lean_overlay").click(hideView);
26 $("#signup").fadeTo(200, 1);
27 $("#lean_overlay").fadeTo(200, 0.5);
28 }
29
30 </script>
31 <style type="text/css">
32 #lean_overlay
33 {
34 position: fixed;
35 z-index: 10000;
36 top: 0px;
37 left: 0px;
38 height: 100%;
39 width: 100%;
40 background: #000;
41 display: none;
42 }
43 #signup
44 {
45 width: 402px;
46 padding-bottom: 2px;
47 display: none;
48 background: #FFF;
49 border-radius: 5px;
50 -moz-border-radius: 5px;
51 -webkit-border-radius: 5px;
52 box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
53 -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
54 -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
55 }
56 </style>
Body中代码
1 <a onclick="ShowView()" href="<%=BaseUrl+"Pages/mysubjectView.aspx?e_id="+rowTemp[i]["id"].ToString() %>"
2 target="fview">
3 <img src="../admin/images/detail.GIF" />
2 target="fview">
3 <img src="../admin/images/detail.GIF" />
4 </a>
<a onclick="ShowView()" href="<%=BaseUrl+"Pages/mysubjectView.aspx?e_id="+rowTemp[i]["id"].ToString() %>" target="fview"><img src="../admin/images/detail.GIF" /> </a