您的位置：首页 > Web前端 > JQuery

jquery弹出层-优化－透明边框

2012-05-10 00:48 92 查看

<%@ 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）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航