<!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"/>
<script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>无标题页</title>
<style type="text/css">
#dialog1
{
position: absolute;
top: 0px;
left: 0pt;
width: 100%;
height: 100%;
background: gray;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
text-align: center;
display:none;
}
#dialog2
{
border: 1px solid rgb(51, 102, 153);
background: white;
position: absolute;
width: 50%;
height: 50%;
top: 135px;
left: 232px;
display:none;
}
#dialog2 .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;position:relative;background:#fff;}
#dialog2 .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
#dialog2 .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
#dialog2 .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
#dialog2 .main ul li a{color:#333;display:block;}
#dialog2 .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}
</style>
<script>
$(function(){
$('#Button1').click(function(){
var height = $(document).height();
var width =$(document).width();
$(document.body).append('<div id="bg"></div>');
$('#bg').css({position:"absolute","z-index":0,left:0,top:0,zoom:1,"height":height,"width":width,"filters":"alpha(opacity=0)","background":"black","opacity":0});
$('#bg').fadeTo(1000,0.3);
$('#dialog2').fadeIn(1000).css({"z-index":1});
});
$('#btnconfirm').click(function(){
$('#dialog1').fadeOut(1000);
$('#bg').fadeTo(1000,0,function(){
$(this).css({"z-index":-1});
})
$('#dialog2').fadeOut(1000);
});
});
function test()
{
alert('ffff');
}
</script>
</head>
<body>
<input id="Button1" type="button" value="弹出" /> ghhhhhhhhhhhhhhhhhhhh <input id="Button1" type="button" value="弹出2" οnclick="test();" />
<div id="dialog1"></div>
<div id="dialog2" align="center">
<div class="main">
<h2>我在这里</h2>
testtestetestetsetetestettsteset
</ul>
</div>
<input id="btnconfirm" type="button" value="确定" />
</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>无标题页</title>
<style type="text/css">
#dialog1
{
position: absolute;
top: 0px;
left: 0pt;
width: 100%;
height: 100%;
background: gray;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
text-align: center;
display:none;
}
#dialog2
{
border: 1px solid rgb(51, 102, 153);
background: white;
position: absolute;
width: 50%;
height: 50%;
top: 135px;
left: 232px;
display:none;
}
#dialog2 .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;position:relative;background:#fff;}
#dialog2 .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
#dialog2 .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
#dialog2 .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
#dialog2 .main ul li a{color:#333;display:block;}
#dialog2 .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}
</style>
<script>
$(function(){
$('#Button1').click(function(){
var height = $(document).height();
var width =$(document).width();
$(document.body).append('<div id="bg"></div>');
$('#bg').css({position:"absolute","z-index":0,left:0,top:0,zoom:1,"height":height,"width":width,"filters":"alpha(opacity=0)","background":"black","opacity":0});
$('#bg').fadeTo(1000,0.3);
$('#dialog2').fadeIn(1000).css({"z-index":1});
});
$('#btnconfirm').click(function(){
$('#dialog1').fadeOut(1000);
$('#bg').fadeTo(1000,0,function(){
$(this).css({"z-index":-1});
})
$('#dialog2').fadeOut(1000);
});
});
function test()
{
alert('ffff');
}
</script>
</head>
<body>
<input id="Button1" type="button" value="弹出" /> ghhhhhhhhhhhhhhhhhhhh <input id="Button1" type="button" value="弹出2" οnclick="test();" />
<div id="dialog1"></div>
<div id="dialog2" align="center">
<div class="main">
<h2>我在这里</h2>
testtestetestetsetetestettsteset
</ul>
</div>
<input id="btnconfirm" type="button" value="确定" />
</div>
</body>
</html>