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 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
JS document对象简单用法完整示例
Jan 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 设计模式之观察者模式介绍
2012/02/22 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
详解js中==与===的区别
2017/01/08 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
品管员岗位职责
2013/11/10 职场文书
医科大学生的自我评价
2013/12/04 职场文书
考试不及格的检讨书
2014/01/22 职场文书
便利店促销方案
2014/02/20 职场文书
团代会主持词
2014/04/02 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang