jquery pop弹出框和锁屏

最新推荐文章于 2023-03-11 09:00:00 发布

影之歌NO1

最新推荐文章于 2023-03-11 09:00:00 发布

阅读量2k

点赞数

分类专栏： html5 javascript

html5 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

javascript

40 篇文章 0 订阅

订阅专栏

<!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的的内容，实现了锁屏的功能，最后是弹出框，

影之歌NO1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery pop弹出框和锁屏

锁屏$(function(){ $(".dj").click(function(){//点击“点我弹出层”时候 $(".tc_box").show()//弹出提示层，之前是隐藏在body里面的var sp_height = $(document).height()//获取当期窗口的高度$(".sp_box").css({"opacity":"0.5","height":sp_
复制链接

扫一扫