【转】用jQuery制作全屏遮盖

最新推荐文章于 2022-07-21 09:40:42 发布

kaindy7633

最新推荐文章于 2022-07-21 09:40:42 发布

阅读量190

点赞数

分类专栏： JavaScript/jQuery 文章标签： jQuery 全屏遮盖 ViewUI

本文链接：https://blog.csdn.net/kaindy7633/article/details/84299139

版权

JavaScript/jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码如下：

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
  < 
  html 
  xmlns 
  = 
  "http://www.w3.org/1999/xhtml" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  http-equiv 
  = 
  "Content-Type" 
  content 
  = 
  "text/html; charset=UTF-8" 
  > 
 
 
  < 
  title 
  >爱斯诺(isnowe.com)-jquery全屏遮罩教程</ 
  title 
  > 
 
 
  < 
  script 
  type 
  = 
  "text/javascript" 
  src 
  = 
  "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 
  ></ 
  script 
  > 
 
 
  < 
  style 
  type 
  = 
  "text/css" 
  > 
 
 
  #mask{width:100%;position:absolute;background:#000; 
 
 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
 
 
  filter:alpha(opacity=90);opacity: .9;z-index:99;left:0;top:0;display:none; 
 
 
  } 
 
 
  #detail—dialog{position:absolute;width:500px;height:300px; 
 
 
  background:#fff;left:30%;top:30%;z-index:999;display:none; 
 
 
  } 
 
 
  </ 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  script 
  type 
  = 
  "text/javascript" 
  > 
 
 
  $(document).ready(function(){ 
 
 
       
  var dialog_h = $(document).height(); 
 
 
       
  $(".open").click(function(){ 
 
 
           
  $("#mask").attr("style","display:block;height:"+dialog_h+"px"); 
 
 
           
  $("#detail—dialog").attr("style","display:block;"); 
 
 
       
  }) 
 
 
       
  $(".close").click(function(){ 
 
 
           
  $("#mask").attr("style","display:none;"); 
 
 
           
  $("#detail—dialog").attr("style","display:none;"); 
 
 
       
  }) 
 
 
  }) 
 
 
  </ 
  script 
  > 
 
 
  < 
  a 
  href 
  = 
  "#" 
  class 
  = 
  "open" 
  >点这里打开弹出层</ 
  a 
  > 
 
 
  < 
  div 
  id 
  = 
  "mask" 
  ></ 
  div 
  > 
 
 
  < 
  div 
  id 
  = 
  "detail—dialog" 
  > 
 
 
        
  我是弹出层,< 
  a 
  href 
  = 
  "#" 
  class 
  = 
  "close" 
  >点这里关闭弹出层</ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

kaindy7633

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【转】用jQuery制作全屏遮盖

代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"...
复制链接

扫一扫