jQuery点击按钮弹出遮罩层且内容居中特效

 更新时间:2015年12月14日 08:21:45   作者:Sunshine_lily   我要评论

这篇文章主要介绍了jQuery点击按钮弹出遮罩层且内容居中特效,需要的朋友可以参考下

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果:

由于是测试的程序,所以我未加关闭的按钮。
一、主体程序

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>弹出居中遮罩</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/layout.css"/>
 </head>
 <body>
  <section class="test">
   这里是主体内容<br />
  <input type="button" class="testButton" value="弹出遮罩" />
  </section>
  <section class="testBg">
   <section class="testCont">
    这里是弹出的内容测试
   </section>
  </section>
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

二、CSS样式

*{
 margin: 0;
 padding: 0;
}
.testBg{
 position: absolute;
 top: 0;
 background-color: #000;
 filter:alpha(opacity=80); /* IE */ 
 -moz-opacity:0.8; /* Moz + FF */ 
 opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
 display:none ;     
}
.testBg .testCont{
 position: absolute;
 top: 0;
 left: 0;
 width:200px;
 border: 1px #ffc700 solid;
 color: #ffc700;
}

三、JS程序
这个才是本次随笔所说的重点,下面来看一段错误的JS程序:

$(function(){
 $(".testBg").height($(window).height()).width($(window).width()); //使遮罩的背景覆盖整个页面
 var testContTop=($(window).height()-$(".testCont").height())/2;  //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2;   //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
 $(".testButton").click(function(){
  $(".testBg").show();
 }) 
})

上面这段程序看起来没有问题,那么来看一下输出的结果:

 

实际测量的时候上下的间距是不一致的。 

那么正确的JS程序是:

$(function(){
 $(".testBg").height($(window).height()).width($(window).width());//使遮罩的背景覆盖整个页面
 
 $(".testButton").click(function(){
  $(".testBg").show();
  showDiv();
 }) 
})
function showDiv(){
  
 var testContTop=($(window).height()-$(".testCont").height())/2; //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2; //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
}

从上面程序可以看出在遮罩层弹出显示以后再执行一个函数动态的设置弹出层的背景大小和距离页面的上间距和左间距,而不是一开始加载JS时就已经设置好弹出层各项参数。

以上就是本文的全部内容,教大家如何实现点击按钮弹出遮罩层且内容居中的效果,

相关文章

  • jquery使用FormData实现异步上传文件

    jquery使用FormData实现异步上传文件

    这篇文章主要为大家详细介绍了jquery使用FormData实现异步上传文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 基于jquery实现省市联动特效

    基于jquery实现省市联动特效

    这篇文章主要介绍了基于jquery实现省市联动特效,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jquery实现从数组移除指定的值

    jquery实现从数组移除指定的值

    这篇文章主要介绍了jquery实现从数组移除指定的值,涉及jQuery中grep()方法对数组元素进行过滤筛选的技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery控制TR显示隐藏的三种常用方法

    jQuery控制TR显示隐藏的三种常用方法

    第一种方法是使用id,第二种方法是使用$.each(),第三种方法是通过属性筛选器,还有很多,大家自家挖掘吧
    2014-08-08
  • Easyui使用Dialog行内按钮布局的实例

    Easyui使用Dialog行内按钮布局的实例

    下面小编就为大家带来一篇Easyui使用Dialog行内按钮布局的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jQuery电话号码验证实例

    jQuery电话号码验证实例

    这篇文章主要为大家详细介绍了jQuery电话号码验证实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 这两个属性都是用于合并两个或多个对象的属性到target对象.
    2014-06-06
  • jQuery表单事件实例代码分享

    jQuery表单事件实例代码分享

    这篇文章主要为大家详细介绍了jQuery表单事件实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 20款非常优秀的 jQuery 工具提示插件 推荐

    20款非常优秀的 jQuery 工具提示插件 推荐

    工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象
    2012-07-07
  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    jQuery通过改变input的type属性实现密码显示隐藏切换功能

    大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求,大家都是怎么实现的呢?今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能,需要的朋友参考下
    2017-02-02

最新评论