html css js 遮罩通用版小 demo【兼容所有浏览器】

学习笔记 马富天 2018-11-09 15:20:32 1 0

【摘要】在网页中实现弹窗遮罩效果是非常常见的一个功能,经常会用到,而自己也很少去保留这些,所以这次打算把弹窗遮罩中几个核心点记录一下。

html 弹窗遮罩的几个核心点在于:

1)弹窗遮罩这一功能,我将它分为三个部分:遮罩部分、弹框部分、正常网页部分,应该是互不干扰的。

2)弹窗背景是灰色透明的,而弹窗的背景不应该是透明的,不应该受到背景透明的影响,这一点最好的办法是将背景和弹框分别独立,不要将弹框放置在背景 div 内,这样背景是透明的,会造成子标签也是透明的,当然可以使用 css 的 rgba 属性来解决,但是 rgba 并不兼容所有浏览器,所以不推荐使用;

3)遮罩应该是宽度 100%,高度应该也是 100% 遮罩,但是当网页高度超过屏幕高度时,未显示的网页应该也是被遮罩的,这一点是需要使用 js 来控制高度的。

运行效果及完整源代码如下:

请输入图片名称
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. 		<title>html + css + js 遮罩小 demo</title>
  7. 		<style type="text/css">
  8. 			* {
  9. 				margin: 0;
  10. 				padding: 0;
  11. 				font-size: 12px;
  12. 			}
  13. 			body {
  14. 				position: relative;
  15. 			}
  16. 			.wrap {
  17. 				position: absolute;
  18. 				z-index: 1;
  19. 				background: #000;
  20. 				opacity: 0.3;
  21. 			    /*兼容IE8及以下版本浏览器*/
  22. 				filter: alpha(opacity=30);
  23. 				width: 100%;
  24. 				height: 100%;
  25. 				display: none;
  26. 				top: 0;
  27. 			}
  28. 			.box {
  29. 				display:none;
  30. 				background: #FFF;
  31. 				position: fixed;
  32. 				left: 50%;
  33. 				top: 40%;
  34. 				margin-left: -100px;
  35. 				width: 200px;
  36. 				height: 100px;
  37. 				margin-top: -50px;
  38. 				z-index: 9999;
  39. 				opacity: 1;
  40. 				text-align:center;
  41. 			}
  42. 			.close {
  43. 				text-align:center;
  44. 			}
  45. 			.content {
  46. 				height: 1300px;
  47. 				text-align: center;
  48. 			}
  49. 		</style>
  50. 	</head>
  51. 	<body>
  52. 		<!-- 遮罩背景、透明灰色 -->
  53. 		<div class="wrap" id="wrap"></div>
  54. 		<!-- 弹窗部分、固定窗口 -->
  55. 		<div class="box" id="box">
  56. 			<a id="close" class="close">关闭	</a>
  57. 		</div>
  58. 		<!-- 网页内容 -->
  59. 		<div class="content">
  60. 			<a href="javascript:void(0);" id="show">弹出</a>
  61. 		</div>
  62. 		<script>
  63. 			var doc   = document.documentElement;
  64. 	        var wrap  = document.getElementById("wrap");
  65. 	        var box   = document.getElementById("box");
  66. 	        var close = document.getElementById("close");
  67. 	        var show  = document.getElementById("show");
  68. 	        show.onclick  = showinfo;
  69. 	        close.onclick = hideinfo;
  70. 	        relHeight     = (doc.clientHeight > doc.scrollHeight) ? doc.clientHeight : doc.scrollHeight;
  71. 	        wrap.style.height = relHeight + 'px';
  72. 	        function showinfo(e)
  73. 	        {
  74. 	        	e.preventDefault();	//	取消 a 标签的默认事件
  75. 	        	wrap.style.display = "block";
  76. 	        	box.style.display  = "block";
  77. 	        }
  78. 	        function hideinfo(e)
  79. 	        {
  80. 	        	e.preventDefault();	//	取消 a 标签的默认事件
  81. 	        	wrap.style.display = "none";
  82. 	        	box.style.display  = "none";
  83. 	        }
  84. 		</script>
  85. 	</body>
  86. </html>

版权归 马富天PHP博客 所有

本文标题:《html css js 遮罩通用版小 demo【兼容所有浏览器】》

本文链接地址:http://www.mafutian.net/389.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 PHP7.0 版本之前 strtotime 和 mktime 的 Y2K38 漏洞【最大时间为 2038 年】 》

这是最后一篇文章

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多