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

来源：互联网发布：js 引用类型堆栈编辑：程序博客网时间：2024/05/18 01:19

最近的项目里面用到了模态框，之前一直是用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(){//判断是否存在cookievar 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>

0 0