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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JS实现普通轮播图特效
Jan 01 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代码
2007/03/03 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python实现猜拳游戏项目
2020/11/30 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
社区活动总结报告
2014/05/05 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
股东授权委托书
2014/10/15 职场文书
文员岗位职责
2015/02/04 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
数据库连接池
2021/04/06 MySQL