1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 .alpha1{
6 filter:alpha(opacity=50);
7 }
8 .alpha2{
9 filter:alpha(opacity=150 finishopacity=0 style=1);/*取值1-4*/
10 }
11 body{
12 margin:0px;
13 padding:0px;
14 }
15 #all{
16 height:100%;
17 background-color:orange;
18 filter:alpha(opacity=30);
19 position:absolute;
20 left:0px;
21 top:0px;
22 width:100%;
23 display:none;
24 }
25 #content{
26 padding:6px;
27 }
28 #div_dialog{
29 width:300px;
30 height:200px;
31 border:solid 1px green;
32 position:absolute;
33 left:0px;
34 top:0px;
35 background-color:white;
36 display:none;
37 }
38 #div_dialog h5{
39 margin:0px;
40 background-color:green;
41 line-height:20px;
42 font-weight:normal;
43 }
44 #info_div{
45 padding:5px;
46 color:#333333;
47 font-size:14px;
48 padding-bottom:100px;
49 }
50 #button_span{
51 display:block;
52 margin-left:90px;
53 }
54 #button_span input{
55 width:42px;
56 height:24px;
57 }
58 </style>
59 </head>
60 <body>
61 <div id='content'>
62 <input type='button' value='打开对话框' onclick="openDialog();">
63 <br/><br/><img src='photo.jpg'/>
64 </div>
65 <div id='all'>
66 </div>
67 <div id='div_dialog'>
68 <h5>关闭窗口对话框</h5>
69 <div id='info_div'>真的要关闭浏览器?</div>
70 <span id='button_span'>
71 <input type='button' value='确定' onclick="closeDialog();"> <input type='button' value='取消' onclick="closeDialog();">
72 </span>
73 </div>
74 <script language='javascript'>
75 var bar=document.getElementById('all');
76 var dialog=document.getElementById('div_dialog');
77 function openDialog(){
78 bar.style.display='block';
79 dialog.style.left=((document.body.offsetWidth-300)/2)+'px';
80 dialog.style.top=((bar.offsetHeight-200)/2-100)+'px';
81 dialog.style.display='block';
82 }
83 function closeDialog(){
84 dialog.style.display='none';
85 bar.style.display='none';
86 }
87 //6-38.html
88 </script>
89 </body>
90 </html>
