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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue的路由映射问题及解决方案
Oct 14 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下对数组进行排序的函数
2010/08/08 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
arguments对象
2006/11/20 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
详解Node 定时器
2018/02/26 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
摘录式读书笔记
2015/07/01 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python