jQuery实现的浮动层div浏览器居中显示效果


Posted in Javascript onFebruary 03, 2017

本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考,具体如下:

1.在页面的head中引入jQuery

<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>

2.在页面的head中加入浮动层和遮罩层的样式

<style>
#previewDiv{z-index: 9999;position:absolute;display:none;background:#fff;border-top:5px solid #999;border-bottom:7px solid #999;border-left:5px solid #999;border-right:7px solid #999;}
.mask {color:#C7EDCC;background-color:#999;position:absolute;top:0px;left:0px;width:100%;height:3000px;opacity: 0.6;filter: "alpha(opacity=60)";filter: alpha(Opacity=60);}
</style>

3.在页面的底部加上浮动的div

<div id="previewDiv">
  <table id ="head">
    <tr><td>短消息预览</td></tr>
  </table>
  <table align="center">
    <tr><td>
      <div class="zhnx_neirong">
        <h3>您收到了来自三水点靠木的回复</h3>
        <p class="duanluo">  内容:这是浮动层居中的实例</span></p>
      </div>
      <div class="zhnx_huifu"><p><a href="javascript:open('https://3water.com/');">查看三水点靠木</a></p></div>
    </td></tr>
  </table>
  <table align="center">
    <tr><td><div><input type="button" value=" 关 闭 " onclick="hide();"/></div></td></tr>
  </table>
</div>

4.添加显示和隐藏的js函数

function show(){
    //添加并显示遮罩层
    $("<div id='mask'></div>").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0);
    document.getElementById("mask").style.display = "block";
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#previewDiv").height();
    var popupWidth = $("#previewDiv").width();
    $("#previewDiv").css({
      "position": "absolute",
      "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
      "left": (windowWidth-popupWidth)/2
    });
    $("#previewDiv").show();
}
function hide(){
    $("#mask").remove();
    $("#previewDiv").hide();
}

完整实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<style>
#previewDiv{z-index: 9999;position:absolute;display:none;background:#fff;border-top:5px solid #999;border-bottom:7px solid #999;border-left:5px solid #999;border-right:7px solid #999;}
.mask {color:#C7EDCC;background-color:#999;position:absolute;top:0px;left:0px;width:100%;height:3000px;opacity: 0.6;filter: "alpha(opacity=60)";filter: alpha(Opacity=60);}
</style>
<div id="previewDiv">
  <table id ="head">
    <tr><td>短消息预览</td></tr>
  </table>
  <table align="center">
    <tr><td>
      <div class="zhnx_neirong">
        <h3>您收到了来自三水点靠木的回复</h3>
        <p class="duanluo">  内容:这是浮动层居中的实例</span></p>
      </div>
      <div class="zhnx_huifu"><p><a href="javascript:open('https://3water.com/');">查看三水点靠木</a></p></div>
    </td></tr>
  </table>
  <table align="center">
    <tr><td><div><input type="button" value=" 关 闭 " onclick="hide();"/></div></td></tr>
  </table>
</div>
<script type="text/javascript" language="javascript" >
 function show(){
    //添加并显示遮罩层
    $("<div id='mask'></div>").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0);
    document.getElementById("mask").style.display = "block";
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#previewDiv").height();
    var popupWidth = $("#previewDiv").width();
    $("#previewDiv").css({
      "position": "absolute",
      "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
      "left": (windowWidth-popupWidth)/2
    });
    $("#previewDiv").show();
  }
  function hide(){
    $("#mask").remove();
    $("#previewDiv").hide();
  }
  show();
</script>
</body>
</html>

运行效果图如下:

jQuery实现的浮动层div浏览器居中显示效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
几种tab切换详解
Feb 03 #Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 #Javascript
拖动时防止选中
Feb 03 #Javascript
jQuery表格的维护和删除操作
Feb 03 #Javascript
折叠菜单及选择器的运用
Feb 03 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
dedecms中使用php语句指南
2014/11/13 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python正则-re的用法详解
2019/07/28 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
工业设计专业自荐书
2014/06/05 职场文书
项目投资合作意向书
2014/07/29 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
民事起诉状范文
2015/05/19 职场文书
新课程改革心得体会
2016/01/22 职场文书