<%@ Page Language= " C# " AutoEventWireup= " true " CodeBehind= " DailogTest.aspx.cs " Inherits= " WebDailog.DailogTest " %> <! 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 runat ="server" > < title >Dailog </ title > < script src ="js/jquery.js" type ="text/javascript" ></ script > < script language ="javascript" type ="text/javascript" > function HideDiv() { $("#dail").hide(); $("#dail2").hide(); $("#lean_overlay").fadeOut(200); } function ShowDiv() { var sig = $("#dail").outerWidth(); /* 加入遮罩层到Body */ var _3 = $("<div id='lean_overlay'> </div>"); $("body").append(_3); /* 边框DIV */ $("#dail").css( { "display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(sig / 2) - 10 + "px", "top": 180 - 10 + "px", "padding": "5px 0px 0px 0px", }); /* 最上层DIV */ $("#dail2").css( { "display": "block", "position": "fixed", "opacity": 0, "z-index": 11001, "left": 50 + "%", "margin-left": -(sig / 2) + "px", "top": "180" + "px", "padding": "5px 0px 0px 0px", }); /* 边框DIV 透明到0.5 */ $("#dail").fadeTo(200, 0.5); /* 最上层DIV 不透明 */ $("#dail2").fadeTo(100, 1); /* 遮罩层 透明到0.1 */ $("#lean_overlay").fadeTo(200, 0.1); $("#lean_overlay").click(HideDiv); $("#lean_overlay").show(); } </ script > < style type ="text/css" > /* 遮罩层 透明度0.1 */ #lean_overlay { position: fixed; z-index: 10000; top: 0px; left: 0px; height: 100%; width: 100%; background: blue; display: none; opacity: 0.1; } </ style > </ head > < body > < a onclick ="ShowDiv()" >Close </ a > < br /> < div id ="dail" style ="height: 300px; width: 500px; opacity: 0.5; border: solid 10px #999999; display: none;" > </ div > < div id ="dail2" style ="height: 300px; width: 500px; background-color: #FFCC00; opacity: 1; display: none;" > < span style ="width: 455px; float: left;" >详细信息 </ span >< span onclick ="HideDiv()" >Close </ span > </ div > </ form > </ body > </ html >
基于Jquery的弹出框，原创（King）