实现document做出弹出框效果，配合延时器，让弹出框缓慢消失。

最新推荐文章于 2022-09-08 15:36:15 发布

小飞侠十一

最新推荐文章于 2022-09-08 15:36:15 发布

阅读量386

点赞数

文章标签： javascript js html5 css

本文链接：https://blog.csdn.net/weixin_43182945/article/details/111715407

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>广告弹出框</title>
	<style>
    	#maxbox{border: 1px solid #ccc;width: 300px;height: 200px;overflow: hidden;margin: 0 auto;position: relative;}
   		#txt{width: 250px;height: 100px;margin: 0 auto;}
    	#btn{ position:absolute;right: 10px; bottom: 0;}
    	#subm{position: absolute;bottom: 0;right: 60px  ;}
	</style>
</head>
<body>
	<div id="maxbox">
    	<input type="text" id="txt" placeholder="请输入内容">
    	<input type="button" id="btn" value="取消">
    	<input type="submit" id="subm" value="确定">
	</div>
</body>
<script>
	var omaxbox = document.getElementById("maxbox")
	var obtn = document.querySelector("#btn");
	var osubm = document.querySelectorAll("#subm")[0];
		//点击取消或确定任何一个都会延迟3s消失
	obtn.onclick = osubm.onclick = function(){
    	//延时器延迟执行omaxbox消失
    	setTimeout(function(){
        	omaxbox.style.display="none";
    	},1000);

	}
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小飞侠十一

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现document做出弹出框效果，配合延时器，让弹出框缓慢消失。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>广告弹出框</title> <style> #maxbox{border: 1px solid #ccc;width
复制链接

扫一扫