jquery pop弹出框和锁屏

来源：互联网发布：mac 屏幕睡眠时间编辑：程序博客网时间：2024/06/05 03:27
<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>锁屏</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script><script type="text/javascript">$(function(){  $(".dj").click(function(){//点击“点我弹出层”时候    $(".tc_box").show()//弹出提示层，之前是隐藏在body里面的var sp_height = $(document).height()//获取当期窗口的高度$(".sp_box").css({"opacity":"0.5","height":sp_height})//锁屏层高度采用获取窗口的高度，从而达到锁全屏的目的。$(".sp_box").show()//显示锁屏层，此时锁屏层的宽在CSS里设置了100%  })  $("h3").click(function(){//点击关闭时候    $(".tc_box").hide()//弹出提示层消失$(".sp_box").hide()//锁屏层消失  })    //下面部分代码是让弹出层，随滚动条滚动而滚动，并始终居中； 此方法有一个缺憾就是弹出层随滚动条滚动的时候有时候会轻微闪屏。建议在IE6下采用这段代码，而FF Chrome等高级浏览器在CSS样式里面定义.tc_box 的定义为：position:fixed, 并设定left,top,margin等值。使其居中，这样就只会在IE6下闪屏了。//附：IE6解决闪屏方法：body{ _background-image: url(about:blank);_background-attachment: fixed;}  var screenwidth,screenheight,mytop,getPosLeft,getPosTop;　　screenwidth = $(window).width();　　screenheight = $(window).height();　　mytop = $(document).scrollTop();　　getPosLeft = screenwidth/2 - 200;　　getPosTop = screenheight/2 - 100;　　$(".tc_box").css({"left":getPosLeft,"top":getPosTop});　　$(window).resize(function(){  　　screenwidth = $(window).width();  　　screenheight = $(window).height();  　　mytop = $(document).scrollTop();  　　getPosLeft = screenwidth/2 - 200;  　　getPosTop = screenheight/2 - 100;  　　$(".tc_box").css({"left":getPosLeft,"top":getPosTop+mytop});　　});　　$(window).scroll(function(){  　　screenwidth = $(window).width();  　　screenheight = $(window).height();  　　mytop = $(document).scrollTop();  　　getPosLeft = screenwidth/2 - 200;  　　getPosTop = screenheight/2 - 100;  　　$(".tc_box").css({"left":getPosLeft,"top":getPosTop+mytop});　　});})</script><style type="text/css"> *{ margin:0; padding:0;}.tc_box{ width:400px; height:200px; border:2px solid red; position:absolute; z-index:2000; background:#FFC;  display:none; }.sp_box{ width:100%;  position:absolute; z-index:1000; background:#000; top:0; left:0; display:none; }</style></head> <body> <p style="height:2000px; padding:20px"><span class="dj">点我弹出层</span><input></p><div class="tc_box">  <h3 style="text-align:right">关闭</h3>  <p>弹出层的说明</p>  <p>弹出层的说明</p>  <p>弹出层的说明</p>  <p>弹出层的说明</p></div><div class="sp_box"></div></body></html>
三层div，最初级的是p（此为背景），在此上面加一层透明度为0.5的div，此时，不能点击p的的内容，实现了锁屏的功能，最后是弹出框，
0 0