javascript:弹出对话框
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>