js点击弹窗练习(modal/模态框)

最新推荐文章于 2024-05-23 21:59:51 发布

「已注销」

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量3.8k

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/weixin_41855546/article/details/107395942

版权

这篇博客介绍了一个JavaScript实现点击按钮弹出模态框并关闭的功能。内容包括使用按钮click事件触发js函数，设置modal的display属性来显示和隐藏窗口。提供了两种不同的实现方式，一种使用

摘要由CSDN通过智能技术生成

要求：
点击按钮，弹出窗口，点击关闭按钮关闭窗口

要点：
1、使用按钮的click方法触发js函数
2、js函数中对隐藏的modal设置dispaly为blcok
3、点击关闭按钮，通过click方法触发js函数
4、js函数中对modal设置display为none

示例代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>modal练习</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="contanier">
			<div class="content" id="modal">				
				<div class="modal-content" id="modal-content">
					<p>modal练习</p>
					<span class="close">&times;</span>
				</div>				
				<button id="btn">点击</button>
			</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	//获取按钮
	var btn = document.getElementById("btn")
	//获取弹

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js点击弹窗练习(modal/模态框)

要求：点击按钮，弹出窗口，点击关闭按钮关闭窗口要点：1、使用按钮的click方法触发js函数2、js函数中对隐藏的modal设置dispaly为blcok3、点击关闭按钮，通过click方法触发js函数4、js函数中对modal设置display为none示例代码1：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>modal练习</title
复制链接

扫一扫