DIV CSS遮罩层

2018-08-02 01:53:55   前端

  web  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>DIV CSS遮罩层</title>
  5. <meta charset='utf-8'/>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-git.min.js"></script>
  7. <style type="text/css">
  8. #background{
  9. display: none;
  10. position: absolute;
  11. top: 0%; left: 0%;
  12. width: 100%; height: 100%;
  13. background-color: black;
  14. z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); /*设置透明度*/
  15. }
  16. #show{
  17. display: none;
  18. position: absolute;
  19. top: 25%; left: 22%;
  20. width: 53%; height: 49%;
  21. padding: 8px;
  22. border: 5px solid #E8E9F7;
  23. background-color: white;
  24. z-index:1002; overflow: auto;
  25. border-radius: 15px; /*设置为圆角*/
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <input id="showdiv" type="button" value="显示遮罩层"/>
  31. <!--遮罩层 start -->
  32. <div id="background"></div>
  33. <div id="show">测试文本<input id="hidediv" type="button" value="关闭"/></div>
  34. <!--遮罩层 end -->
  35. </body>
  36. </html>
  37. <script language="javascript" type="text/javascript">
  38. //弹出遮罩层
  39. $("#showdiv").click(function(){
  40. $("#background").show();
  41. $("#show").show();
  42. });
  43. //关闭遮罩层
  44. $("#hidediv").click(function(){
  45. $("#background").hide();
  46. $("#show").hide();
  47. });
  48. </script>