html页面js实现页面弹框

时间：2024-02-21 18:08:52

版权声明：转载请注明出处。 原文作者：宋发元 原文链接：http://blog.csdn.net/u011019141/article/details/52527373

1、按钮

  1. <a class="button border-green button-little" onclick="javasrcipt:ShowDiv(\'MyDiv\',\'fade\')" >新增二级分类</a>  
2、弹框内容
  1. <!--弹出层时背景层DIV---start-->  
  2. <div id="fade" class="black_overlay"></div>  
  3. <div id="MyDiv" class="white_content">  
  4.     <div style="text-align: right; cursor: default; margin-top:10px;margin-bottom:10px;">  
  5.         <span style="font-size: 16px; margin-right: 17px; color: #56BE2D; font-weight: 600;cursor:pointer;"  onclick="CloseDiv(\'MyDiv\',\'fade\')">关闭</span>  
  6.     </div>  
  7.     <div class="itempanel" style="    margin-left: 13%;">  
  8.         <div class="floatleft title" style="text-align: left;">二级分类名称：</div>  
  9.         <div class="floatleft editor" style="font-size:16px;height: 24px;line-height: 24px;"><input type="text" id="label" name="label" placeholder="请输入二级分类名称"/></div>  
  10.         <div class="floatleft message"></div>  
  11.         <div class="clear"></div>  
  12.     </div>  
  13.     <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3); margin-top: 39px;" width="90%" color=#ddd SIZE=2>  
  14.     <div style="margin-bottom: 23px; margin-top: 23px; margin-left: 23%;">  
  15.         <input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="javasrcipt:goToAdd()" value="添加" style="width: 123px; margin-left: 20%; ">  
  16.         <input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="CloseDiv(\'MyDiv\',\'fade\')" value="取消" style="width: 123px; margin-left: 20%; ">  
  17.     </div>  
  18. </div>  
  19. <!--弹出层时背景层DIV---end-->  
3、js部分
 
  1. //===================================弹框js部分 start by:songfayuan=========================================  
  2. //弹出隐藏层  
  3. function ShowDiv(show_div,bg_div){  
  4.     var scrollHeight = document.body.scrollHeight; //文档高度  
  5.     document.getElementById(bg_div).style.height=scrollHeight+\'px\';  
  6.       
  7.     document.getElementById(show_div).style.display=\'block\';  
  8.     document.getElementById(bg_div).style.display=\'block\';  
  9. };  
  10. //关闭弹出层  
  11. function CloseDiv(show_div,bg_div)  
  12. {  
  13.     document.getElementById("label").value = \'\';  
  14.     document.getElementById(show_div).style.display=\'none\';  
  15.     document.getElementById(bg_div).style.display=\'none\';  
  16. };  
  17. //关闭弹出层  
  18. function CloseDiv2()  
  19. {  
  20.     document.getElementById("MyDiv").style.display=\'none\';  
  21.     document.getElementById("fade").style.display=\'none\';  
  22. };  
  23. //===================================弹框js部分 end by:songfayuan=========================================  
4、css部分
 
  1. /* ===================================弹框css部分 start by:songfayuan========================================= */  
  2. .black_overlay{  
  3.     display: none;  
  4.     position: absolute;  
  5.     top: 0%;  
  6.     left: 0%;  
  7.     width: 100%;  
  8.     height: 100%;  
  9.     background-color: black;  
  10.     z-index:1001;  
  11.     -moz-opacity: 0.8;  
  12.     opacity:.50;  
  13.     filter: alpha(opacity=50);  
  14. }  
  15. .white_content {  
  16.     display: none;  
  17.     position: absolute;  
  18.     top: 35%;  
  19.     left: 36%;  
  20.     width: 33%;  
  21.     border: 2px solid #d3d3d3;  
  22.     background-color: white;  
  23.     z-index: 1002;  
  24.     /* overflow: auto; */  
  25. }  
  26. .white_content_small {  
  27.     display: none;  
  28.     position: absolute;  
  29.     top: 20%;  
  30.     left: 30%;  
  31.     width: 40%;  
  32.     height: 50%;  
  33.     border: 16px solid lightblue;  
  34.     background-color: white;  
  35.     z-index:1002;  
  36.     overflow: auto;  
  37. }  
  38. /* ===================================弹框css部分 end by:songfayuan========================================= */  
5、效果图

 

相关文章