编程 Javascript

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

Posted in Javascript onDecember 14, 2015

本文为大家分享了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时就已经设置好弹出层各项参数。

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

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

- Author -

Sunshine_lily

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 与或运算符 || && 妙用

Dec 09 Javascript

JavaScript DOM学习第六章表单实例

Feb 19 Javascript

jQuery :first选择器使用介绍

Aug 09 Javascript

基于JavaScript实现div层跟随滚动条滑动

Jan 12 Javascript

Node.js项目中调用JavaScript的EJS模板库的方法

Mar 11 Javascript

js判断浏览器是否支持严格模式的方法

Oct 04 Javascript

javascript简易画板开发

Apr 12 Javascript

JavaScript Date 知识浅析

Jan 29 Javascript

利用yarn代替npm管理前端项目模块依赖的方法详解

Sep 04 Javascript

详谈DOM简介及节点、属性、查找节点的方法

Nov 16 Javascript

js判断输入框不能为空格或null值的实现方法

Mar 02 Javascript

element-ui组件table实现自定义筛选功能的示例代码

Mar 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