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

javascript:弹出对话框

2012-06-19 10:16 113 查看

<html>
<head>
<title>1</title>
<style type='text/css'>
.alpha1{
filter:alpha(opacity=50);
}
.alpha2{
filter:alpha(opacity=150 finishopacity=0 style=1);/*取值1-4*/
}
body{
margin:0px;
padding:0px;
}
#all{
height:100%;
background-color:orange;
filter:alpha(opacity=30);
position:absolute;
left:0px;
top:0px;
width:100%;
display:none;
}
#content{
padding:6px;
}
#div_dialog{
width:300px;
height:200px;
border:solid 1px green;
position:absolute;
left:0px;
top:0px;
background-color:white;
display:none;
}
#div_dialog h5{
margin:0px;
background-color:green;
line-height:20px;
font-weight:normal;
}
#info_div{
padding:5px;
color:#333333;
font-size:14px;
padding-bottom:100px;
}
#button_span{
display:block;
margin-left:90px;
}
#button_span input{
width:42px;
height:24px;
}
</style>
</head>
<body>
<div id='content'>
<input type='button' value='打开对话框' onclick="openDialog();">
<br/><br/><img src='photo.jpg'/>
</div>
<div id='all'>
</div>
<div id='div_dialog'>
<h5>关闭窗口对话框</h5>
<div id='info_div'>真的要关闭浏览器?</div>
<span id='button_span'>
<input type='button' value='确定' onclick="closeDialog();">  <input type='button' value='取消' onclick="closeDialog();">
</span>
</div>
<script language='javascript'>
var bar=document.getElementById('all');
var dialog=document.getElementById('div_dialog');
function openDialog(){
bar.style.display='block';
dialog.style.left=((document.body.offsetWidth-300)/2)+'px';
dialog.style.top=((bar.offsetHeight-200)/2-100)+'px';
dialog.style.display='block';
}
function closeDialog(){
dialog.style.display='none';
bar.style.display='none';
}
//6-38.html
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航