html淡入淡出弹出框，只要会css选择器的水平就能看懂并且写出来

最新推荐文章于 2022-02-25 11:40:09 发布

weixin_44078748

最新推荐文章于 2022-02-25 11:40:09 发布

阅读量529

点赞数 1

文章标签： html css jquery javascript

本文链接：https://blog.csdn.net/weixin_44078748/article/details/108759484

版权

不必说，肯定有无数的小朋友跟我是一样的，写网页你叫我完整的写俺不会，但是遇到需求却能百度给百度出来的那种水平，今天我就又搞定了一种，就是解决了html网页代码中的淡入淡出的弹出框，记录一下。

啥都先不说直接上代码先，其实我就是用了jQuery（小朋友不要害怕，这玩意不需要知道也能懂）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		#popbg{
			position: absolute;
			top: 0;
			left: 0;
			background-color: grey;
			width: 100%;
			opacity: 0.3;
		}
		#pop{
			width: 200px;
			height: 300px;
			background-color: white;
			position: absolute;
			margin-left: 50%;
			/*margin-top: 50%;*/
			top: 150px;
			left:-100px;
		}
		.bottom_btn{
			position: absolute;
			bottom: 10px;
			margin-right: 50%;
			right: -15px;
		}
	</style>
<body>
	<div id="popbg"></div>
	<div id="pop">
		this is a  grdual pop
		<button class="bottom_btn" value="" onclick="close_pop()">click</button>
	</div>


	<div class="bg">this is a background</div>
	
</body>
	<script type="text/javascript">
		$('#popbg').css("height",document.documentElement.clientWidth);
		function close_pop(){
				// $('#pop').fadeOut(2000);
				// $("#pop").slideUp("slow");
				var pop_div = $("#pop")
				pop_div.animate({
					top:'-=100px',
					opacity:'0'
					});
				$('#popbg').animate({
					opacity:'0'
				})

		}
	</script>
</html>

这个就是完整的代码了，我就是用了jQuery的动画，设置css中的opacity变化到0罢了…秒懂的大神们可以退出去了，小朋友们我们再唠唠

这个最后面的js代码看不懂没关系，上面的css代码如果看不懂也可以退出去了…

首先开头的这句

<script type="text/javascript" src="jquery.js"></script>

这句话就是把本路径中的jQuery.js文件导进来，但是那个文件的话需要去下载的。
然后最后面的那个script标签里面的就是说点了html中的那个button（那个onclick就是链接这里面那个function的…这个应该可以懂吧…）在那个close_pop方法里面的$（）这个东西是jquery的选择器，就是他选择了我们上面的那个pop div，执行后面的那个方法也就是animate，所谓的动画，就是这里面改变了css的内容做到了淡入淡出效果

最后再啰嗦一句，发现了一个学jquery比较直观的网站，是菜鸟里面的，分享一下，jquery学习网站

weixin_44078748

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html淡入淡出弹出框，只要会css选择器的水平就能看懂并且写出来

不必说，肯定有无数的小朋友跟我是一样的，写网页你叫我完整的写俺不会，但是遇到需求却能百度给百度出来的那种水平，今天我就又搞定了一种，就是解决了html网页代码中的淡入淡出的弹出框，记录一下。啥都先不说直接上代码先，其实我就是用了jQuery（小朋友不要害怕，这玩意不需要知道也能懂）<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" s
复制链接

扫一扫