模态框，引导页制作(CSS,js)

最新推荐文章于 2024-05-26 14:25:50 发布

gglinux

最新推荐文章于 2024-05-26 14:25:50 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签： html css javascript jquery

本文链接：https://blog.csdn.net/gglinux/article/details/41521371

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近的项目里面用到了模态框，之前一直是用jQuery插件实现的。主要是modal和sexyimages这两个东东，可是这两个满足不了需求了。查了下资料

没有什么难点，照着代码敲就行了。。。step1，2，3，就是对应的三张图片，test.png是背景图片。。。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
	*{
		margin: 0px;padding: 0px;
	}
	body{
		background-image: url(./test.png);width: 100%;height: 100%;/*现在是把一张图片作为网站*/
	}
	#black{
		width: 100%;height: 100%;display: none;background-color: #000;position: fixed;top: 0px;left: 0px;opacity: 0.5;filter:alpha(opacity=50);/*透明度兼容ie低版本*/
	}
	#modal{
		position: absolute;top: 0px;left: 50%;margin-left: -540px; height: 600px;width: 1080px;
	}
	.step{
		position: absolute;top: 100px;left: 240px;height: 500px;width: 630px;
	}
	.step a{
		position: absolute;
		text-indent:-9999px;overflow: hidden;cursor: pointer;/*将文字置于无限远处*/
	}
	.step span{
		position: absolute;
		text-indent:-9999px;overflow: hidden;cursor: pointer;
	}
	#stepa{
		background:url(./step1.png);display: none;
	}
	#stepa a{
		width: 120px;height: 120px;left: 500px;top: 0px;
	}
	#stepa span{
		width: 70px;height: 80px;top: 385px;left: 520px;
	}
	#stepb{
		background:url(./step2.png);display: none;
	}
	#stepb a{
		width: 120px;height: 120px;left: 500px;top: 0px;
	}
	#stepb span{
		width: 70px;height: 80px;top: 385px;left: 520px;
	}
	#stepc{
		background:url(./step3.png);display: none;
	}
	#stepc a{
		width: 120px;height: 120px;left: 500px;top: 0px;
	}
	#stepc span{
		width: 70px;height: 80px;top: 385px;left: 520px;
	}
</style>
<body>
<!-- 网站页面阴影区 -->
<div id="black"></div>

<div id="modal">
	<div class="step" id="stepa">
		<a href="javascript:;" title="关闭">关闭</a><span title="下一步">下一步</span>
	</div>
	<div class="step" id="stepb">
		<a href="javascript:;" title="关闭">关闭</a><span title="下一步">下一步</span>
	</div>
	<div class="step" id="stepc">
		<a href="javascript:;" title="关闭">关闭</a><span title="下一步">下一步</span>
	</div>
</div>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">	

	function getCookie(c_name)
	{
	if (document.cookie.length>0)//不存在cookie
	  {
	  //cookie的格式类似于 sign=yxs,得到sign的s索引
	  c_start=document.cookie.indexOf(c_name + "=");
	  if (c_start!=-1)
	    { 
	    //得到=的索引
	    c_start=c_start + c_name.length+1;
	    //从c_start开始找到;的索引
	    c_end=document.cookie.indexOf(";",c_start);
	    //没有;则说明是最后一个cookie
	    if (c_end==-1) c_end=document.cookie.length;
	    return (document.cookie.substring(c_start,c_end));
	    } 
	  }
	return "";
	}


	$(document).ready(function(){
		//判断是否存在cookie
		var cookie=getCookie("sign");
		// alert(cookie);
		if (cookie=="") {
			$('#black,#modal,#stepa').show();
			$('#modal div span').click(function(){
				var current=$(this).parent();
				current.hide();
				current.next().show();
			});
			$('#modal div a,#modal div span:last').click(function(){
				$('#black,#modal').hide();
			});
		}

	});
</script>
</body>
</html>

gglinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模态框，引导页制作(CSS,js)

最近的项目里面用到了模态框，之前一直是用jQuery插件实现的。主要是modal和sexyimages这两个东东，可是这两个满足不了需求了。查了下资料没有什么难点，照着代码敲就行了。。。step1，2，3，就是对应的三张图片，test.png是背景图片。。。 test *{ margin: 0px;padding: 0px; } body{ background
复制链接

扫一扫