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开发包大全整理
Dec 22 Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
js跳转页面方法总结
Jan 29 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 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正则走开
2008/03/15 PHP
php 特殊字符处理函数
2008/09/05 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php实现分页显示
2015/11/03 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python中for循环和while循环的基本使用方法
2015/08/21 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python利用tkinter实现屏保
2019/07/30 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
django 简单实现登录验证给你
2019/11/06 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
总经理工作职责范文
2014/03/14 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
民事和解协议书格式
2014/11/29 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL