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


Posted in Javascript onDecember 14, 2015

本文为大家分享了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();
 }) 
})

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

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

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

那么正确的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时就已经设置好弹出层各项参数。

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

Javascript 相关文章推荐
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
jquery实现倒计时效果
Dec 14 #Javascript
JavaScript 七大技巧(一)
Dec 13 #Javascript
JavaScript 七大技巧(二)
Dec 13 #Javascript
js自定义回调函数
Dec 13 #Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 #Javascript
分享Javascript实用方法二
Dec 13 #Javascript
JavaScript判断按钮被点击的方法
Dec 13 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
nodejs基础知识
2017/02/03 NodeJs
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
React diff算法的实现示例
2018/04/20 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Django异步任务线程池实现原理
2019/12/17 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
大型营销活动计划书
2014/04/28 职场文书
学校安全生产承诺书
2014/05/23 职场文书
公民代理授权委托书
2014/09/24 职场文书
2015年端午节活动总结
2015/02/11 职场文书
怎样写家长意见
2015/06/04 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python