js 弹出浮动层

最新推荐文章于 2016-11-17 17:12:13 发布

陶龙

最新推荐文章于 2016-11-17 17:12:13 发布

阅读量844

点赞数

CC 4.0 BY-SA版权

分类专栏： js&html&css 文章标签： js

本文链接：https://blog.youkuaiyun.com/taolong1/article/details/24890563

js&html&css 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现网页弹出层的方法。通过简单的代码示例展示了如何创建带有背景遮罩的弹出框，并实现了点击按钮显示和关闭弹出层的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>


<script type="text/javascript">    
	function tanchu(){
		document.getElementById("opacitys").style.display='block';
		document.getElementById("content").style.display='block';
	}


	function close(){
		document.getElementById("opacitys").style.display='none';
		document.getElementById("content").style.display='none';
	}
</script>    
<body>
	     <div id="opacitys" 
		 style="background-color:white;top:0px;left:0px;right:0px; bottom:0px;position:absolute;display:none;opacity:0.5;z-index:1000;">
		 </div>


		 <div id="content" 
		 style="background-color:red;width:50%;height:50%;display:none;position:absolute;z-index:2000;
		 top: 0; left: 0; bottom: 0; right: 0;margin:auto;border:2px solid red;">
			<div style="margin:10px;">
				<a href=""# onclick="close()" style="float:right;background-image:url(close.png);width:17px;height:17px;"></a>
				我是显示内容我是显示内容我是显示内容我是显示内容我是显示内容我是显示内容我是显示内容我是显示内容我是显示内容
			</div>
		 </div>


		 <a href="#" onclick="tanchu()" >弹出层<a>
</body>
</html>