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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
简单实现js倒计时功能
Feb 13 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
JS实现贪吃蛇游戏
Nov 15 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
Apache设置虚拟WEB
2006/10/09 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
使用js实现雪花飘落效果
2013/08/26 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python break语句详解
2014/03/11 Python
判断网页编码的方法python版
2016/08/12 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python游戏开发的五个案例分享
2020/03/09 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
如何写出好的Java代码
2014/04/25 面试题
服装创业计划书范文
2014/02/05 职场文书
股权转让意向书
2014/04/01 职场文书
学生检讨书怎么写
2014/10/09 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA