Jquery仿慕课网弹出层

阿正木讷男

于 2018-10-25 20:45:54 发布

阅读量160

点赞数

分类专栏： jquery 文章标签： web前端 jquery 弹出层案例

本文链接：https://blog.csdn.net/weixin_41451012/article/details/83386172

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

闲来无趣，在学习的过程中，随手制作的一个jquery弹出层案例，实用方便，仅供参考

1.html代码如下：

<body>

	<div class="header">
		<div class="banner">
			<img src="../images/003.png">
			<span><a href="http://coding.imooc.com/">实战</a></span>
			<span><a href="http://www.imooc.com/course/program">路径</a></span>
			<span><a href="http://www.imooc.com/wenda">猿问</a></span>
			<span><a href="http://www.imooc.com/article">手记</a></span>
		</div>
		<a id="loginLink" href="#">登录</a>
		<a id="regeLink" href="#">注册</a>
	</div>

	<div class="swipe">
		<div class="nav">
			<div class="item">
				<p class="title">前端开发</p>
				<p>
					<span>Html / Css</span>
					<span>Javascript</span>
					<span>Html5</span>
				</p>
			</div>
			<div class="item">
				<p class="title">后端开发</p>
				<p>
					<span>PHP / Nodejs</span>
					<span>Java</span>
					<span>C#</span>
				</p>
			</div>
			<div class="item">
				<p class="title">移动开发</p>
				<p>
					<span>Android</span>
					<span>iOs</span>
					<span>Cocos2d-x</span>
				</p>
			</div>
			<div class="item">
				<p class="title">数据处理</p>
				<p>
					<span>Mysql</span>
					<span>Oracle</span>
					<span>MongoDB</span>
				</p>
			</div>
		</div>
		<div class="ppt first"></div>
	</div>

	<div class="lessions">
		<p class="title">❤ 热门课程</p>
		<ul>
			<li>
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="../images/006.jpg">
				<p>代码编写规范</p>
			</li>

			<li style="margin-right:0;">
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="../images/006.jpg">
				<p>代码编写规范</p>
			</li>
			<li>
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li style="margin-right:0;">
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
		</ul>
	</div>

	<div class="lessions">
		<p class="title">☆ 最新发布</p>
		<ul>
			<li>
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="../images/006.jpg">
				<p>代码编写规范</p>
			</li>

			<li style="margin-right:0;">
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li>
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
			<li>
				<img src="../images/006.jpg">
				<p>代码编写规范</p>
			</li>
			<li>
				<img src="../images/004.jpg">
				<p>JavaScript快速入门</p>
			</li>
			<li style="margin-right:0;">
				<img src="../images/005.jpg">
				<p>玩转Photoshop</p>
			</li>
		</ul>
	</div>

	<div class="footer">
		<div class="site">
			<span>关于我们</span>
			<span>人才招聘</span>
			<span>讲师招募</span>
			<span>联系我们</span>
			<span>意见反馈</span>
			<span>友情链接</span>
		</div>
		<div class="author">
			© 2016 imooc.com  京ICP备13046642号
		</div>
	</div>

	<!-- 弹出层遮罩 -->
	<div id="layer-mask" class="layer-mask"></div>
	<!-- 弹出层窗体 -->
	<div id="layer-pop" class="layer-pop">
		<!-- 弹出层关闭按钮 -->
		<div id="layer-close" class="layer-close">×</div>
		<!-- 弹出层内容区域 -->
		<div id="layer-content" class="layer-content">
			
		</div>
	</div>

	<!-- 登录窗体 -->
	<div id="loginHtml" style="display:none;">
		<!-- 登录窗体 -->
		<div class="login">
			<h4 class="title">登 录</h4>
			<div class="item">
				<label>账号</label>
				<input id="username" class="input" name="username" type="text"/>
				<p class="error-msg"></p>
			</div>
			<div class="item">
				<label>密码</label>
				<input id="password" class="input" name="password" type="password"/>
			</div>
			<div class="item">
				<label>&nbsp;</label>
				<input id="loginSubmitBtn" type="submit" class="submit" value="填写好了"/>
			</div>
		</div>
	</div>

	<!-- 注册窗体 -->
	<div id="regeHtml" style="display:none;">
		<!-- 注册窗体 -->
		<div class="login">
			<h4 class="title">注 册</h4>
			<div class="item">
				<label>账号</label>
				<input id="username" class="input" name="username" type="text"/>
				<p class="error-msg"></p>
			</div>
			<div class="item">
				<label>密码</label>
				<input id="password" class="input" name="password" type="password"/>
			</div>
			<div class="item">
				<label>重复密码</label>
				<input id="repassword" class="input" name="repassword" type="password"/>
			</div>
			<div class="item">
				<label>&nbsp;</label>
				<input id="regeSubmitBtn" type="submit" class="submit" value="填写好了"/>
			</div>
		</div>
	</div>

</body>

2.css样式如下：

body
{
	text-align:center;
	font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
	line-height:30px;
}
ul,li
{
	list-style:none;
}
/*弹出层遮罩*/
.layer-mask
{
	display: none;
	z-index: 99999;
	position: fixed;
	top : 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: #000;
	opacity: 0.5;
}

/*弹出层窗体*/
.layer-pop
{
	display: none;
	z-index : 100000;
	position: fixed;
	top : 0;
	left : 0;
	right : 0;
	bottom: 0;
	margin: auto;

	width: 400px;
	height: 300px;
	background: #fff;
}
/*弹出层关闭按钮*/
.layer-close
{
	float :right;
	width: 24px;
	height: 24px;
	border: 3px solid #fff;
	text-align: center;
	line-height: 24px;
	border-radius: 50%;
	background: #eee;

	margin-right: -12px;
	margin-top:-12px; 
}
.layer-close:hover
{
	cursor: pointer;
	background: #ccc;
	color: #fff;
}

/*登录*/
.login
{

}
.login h4
{
	font-size:20px;
	line-height:50px;
}

.login label
{
	margin-right: 5px;
    color: #888;
    display: inline-block;
    width: 60px;
    text-align: right;
}

.login .input
{
	border:1px solid #ccc;
	border-radius:3px;
	padding:10px 5px;
	width:250px;
}

.login .item
{
	margin:20px auto;
}

.login .submit
{
	background: #e40;
	border:1px solid #e40;
	border-radius:5px;
	padding:10px 5px;
	width:250px;
	color:#fff;
}
.login .error-msg
{
	color:#e40;
}

/*慕课网效果*/
/*顶部*/
.header
{
	height:80px;
	line-height:80px;
	text-align : right;
	margin: 0 20px;
	overflow:hidden;
}
.header .banner
{
	float:left;	
}
.header .banner span
{
	font-size:18px;
	margin:0 15px;
	line-height:80px;
}
.header .banner img
{
	width:150px;
	vertical-align: middle;
	margin-right:40px;
}
.header a
{
	color:#666;
	text-decoration:none;
	margin-left:20px;
}
/*轮播*/
.swipe
{
	width: 1200px;
	height: 450px;
	margin : 0 auto;	
	overflow:hidden;
}
.swipe .ppt
{
	width:100%;
	height:100%;
}
.swipe .ppt.first
{
	background:url(../images/001.jpg);
	background-size: cover;
}
.swipe .ppt.second
{
	background:url(../images/002.jpg);
	background-size: cover;
}
/*导航*/
.nav
{
	position:absolute;
	width : 280px;
	height:450px;
	background: #000;
	color:#fff;

	filter:alpha(opacity=50);  /*支持 IE 浏览器*/
	-moz-opacity:0.50; /*支持 FireFox 浏览器*/
	opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/
}
.nav .item
{
	margin: 5px 20px;
	padding: 10px;
	text-align:left;
	border-bottom:1px solid #aaa;
}
.nav .item:hover
{
	background:#666;
	cursor: pointer;
}
.nav .item .title
{
	font-size:16px;
	margin-bottom:10px;
}
.nav .item span
{
	margin-right : 9px;
}
/*课程排列*/
.lessions
{
	width : 1200px;
	margin : 0 auto;
}
.lessions .title
{
	text-align:left;
	line-height : 45px;
	color:#666;
	font-size:16px;
	margin-top:30px;
}
.lessions ul
{
	overflow:hidden;
}
.lessions li
{
	float : left;
	width : 23%;
	margin-right: 32px;
	margin-top: 32px;
}
.lessions li img
{
	max-width:100%;
}
/*页脚*/
.footer
{
	margin-top:50px;
	padding:50px 0;
	background: #eee;
	border-top : 1px solid #ddd;
}
.footer .site
{
	line-height:100px;
}
.footer .site span
{
	margin:0 20px;
	color :#888;
}

3.jquery脚本如下：



$(document).ready(function($){



	// 登录链接事件
	// $("#loginLink").click(function(){
	// 	// 显示弹出层遮罩
	// 	$("#layer-mask").show();
	// 	// 显示弹出层窗体
	// 	$("#layer-pop").show();
	// 	// 弹出层关闭按钮绑定事件
	// 	$("#layer-close").click(function(){
	// 		// 弹出层关闭
	// 		$("#layer-mask").hide();
	// 		$("#layer-pop").hide();
	// 	});
	// });

	
	// 登录链接事件
	$("#loginLink").click(function(){
		// 获取登录窗体代码
		var loginHtml = $("#loginHtml").html();
		showLayer(loginHtml,500,300,closeCallback);

		// 登录表单校验
		$("#loginSubmitBtn").click(function(){
			var username = $("input[name='username']").val();
			var password = $("input[name='password']").val();
			if(username === 'imooc' && password === 'imooc'){
				alert("登录成功");
			}else{
				$(".error-msg").html("账号或密码输入错误");
			}
		});
	});

	// 注册链接事件
	$("#regeLink").click(function(){
		// 获取注册窗体代码
		var regeHtml = $("#regeHtml").html();
		showLayer(regeHtml,500,350,closeCallback);

		// 注册表单校验
		$("#regeSubmitBtn").click(function(){
			var username = $("input[name='username']").val();
			var password = $("input[name='password']").val();
			var repassword = $("input[name='repassword']").val();
			if(username === 'imooc' && password === 'imooc' && repassword === password){
				alert("注册成功");
			}else{
				$(".error-msg").html("账号或密码输入错误");
			}
		});
	});


	// 弹出层关闭回调函数
	function closeCallback(){
		$(".error-msg").html("");
	}	

	// 显示弹出层
	function showLayer(html,width,height,closeCallback){
		// 显示弹出层遮罩
		$("#layer-mask").show();
		// 显示弹出层窗体
		$("#layer-pop").show();
		// 设置弹出层窗体样式
		$("#layer-pop").css({
			width : width,
			height : height
		});
		// 填充弹出层窗体内容
		$("#layer-content").html(html);
		// 弹出层关闭按钮绑定事件
		$("#layer-close").click(function(){
			// 弹出层关闭
			hideLayer();
			// 关闭的回调函数
			closeCallback();
		});
	}

	// 隐藏弹出层
	function hideLayer(){
		// 弹出层关闭
		$("#layer-mask").hide();
		$("#layer-pop").hide();
	}

});

阿正木讷男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery仿慕课网弹出层

闲来无趣，在学习的过程中，随手制作的一个jquery弹出层案例，实用方便，仅供参考html代码如下：&amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;header&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;banner&amp;quot;&amp;amp;gt; &am
复制链接

扫一扫