脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现弹出遮罩层且内容居中

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无缝轮播图代码

    jQuery无缝轮播图代码

    这篇文章主要为大家详细介绍了jQuery无缝轮播图代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jquery实现员工信息添加与删除功能

    jquery实现员工信息添加与删除功能

    这篇文章主要为大家详细介绍了利用jquery制作简易的员工信息添加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • jQuery获取样式中的背景颜色属性值/颜色值

    jQuery获取样式中的背景颜色属性值/颜色值

    天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样，IE中是以HEX格式显示#ffff00，而Chrome、Firefox中则是以GRB格式显示rgb(255,0,0)，由于需要将颜色值存储到数据库中，所以想让颜色值的格式统一下（其实不统一也是可以存的）。搜索了一下，从国外的一个网站上得到一段代码
    2012-12-12
  • 深入解析jQuery中Deferred的deferred.promise()方法

    深入解析jQuery中Deferred的deferred.promise()方法

    这篇文章主要介绍了jQuery中Deferred的deferred.promise()方法,提醒千万要注意deferred.promise()与jQuery的.promise() 实例方法的区别,需要的朋友可以参考下
    2016-05-05
  • jquery实现邮箱自动填充提示功能

    jquery实现邮箱自动填充提示功能

    这篇文章主要介绍了jquery实现邮箱自动填充提示功能，为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能，对如何实现自动提示功能感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 一步一步教你写一个jQuery的插件教程(Plugin)

    一步一步教你写一个jQuery的插件教程(Plugin)

    我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。
    2009-09-09
  • jquery实现数字输入框

    jquery实现数字输入框

    本文主要分享了jquery实现数字输入框的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • jQuery属性选择器用法示例

    jQuery属性选择器用法示例

    这篇文章主要介绍了jQuery属性选择器用法,结合实例形式分析了jQuery中针对属性的判断与匹配相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jquery插件如何使用 jQuery操作Cookie插件使用介绍

    jquery插件如何使用 jQuery操作Cookie插件使用介绍

    本文将介绍jQuery如何操作Cookie插件,需要了解的朋友可以参考下
    2012-12-12

最新评论