（与jQuery靠近乎）04-实例*用jQuery做一个弹窗/模态框/注册窗口效果

风尚云网

于 2021-11-12 21:35:47 发布

阅读量666

点赞数 4

分类专栏： jq学习文章标签：动画 jquery css3

本文链接：https://blog.csdn.net/zsx0806/article/details/121296381

版权

jq学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎用jQuery的动画事件做一些好玩的

温馨提醒：好记性不如赖笔头，遇到新知识记得做好笔记哦，多学多练

1.弹窗实例、模态框实例，注册窗口效果：

弹窗图示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;}
		body{ padding: 30px;}
		.modal{
			/* 100vw 1个屏幕的宽，100vh 1个屏幕的高 */
			width: 100vw;
			height: 100vh;
			/* 背景色；绝对定位；左0；顶0；层级900 */
			background-color: rgba(0,0,0,.3);
			position: absolute;
			left:0;
			top:0;
			z-index: 999;
		}
		.modal-content{
			/* 宽；高；背景；绝对定位；left 50% ；顶50%； 微信自身宽50%高50% */
			width: 400px;
			height: 300px;
			background-color: #fff;
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
		}
		</style>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				// 单击close 关闭modal
				$(".close").click(function(){
					$(this).parents(".modal").fadeOut(400);
				})
				// 单击button显示modal
				$("button").click(function(){
					$(".modal").fadeIn(700);
				})
			})
		</script>
	</head>
	<body>
		<button>弹框</button>
		<div class="modal">
			<div class="modal-content">
				<div class="modal-header">标题 <span class="close">&times;</span></div>
				<div class="modal-body">内容</div>
			</div>
		</div>
	</body>
</html>

本次分享到这里结束了

我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，

关注风尚不迷路！

记得一键三连，禁止白嫖

风尚云网

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
（与jQuery靠近乎）04-实例*用jQuery做一个弹窗/模态框/注册窗口效果

今天，我还是风尚，一个有梦想的咸鱼程序员今天我们还来和jQuery来靠近乎用jQuery的动画事件做一些好玩的温馨提醒：好记性不如赖笔头，遇到新知识记得做好笔记哦，多学多练1.弹窗实例、模态框实例，注册窗口效果：弹窗图示：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <sty..
复制链接

扫一扫