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 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
Vue中keep-alive组件作用详解
Feb 04 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
mpvue跳转页面及注意事项
2018/08/03 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
python3将视频流保存为本地视频文件
2018/06/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
商务主管岗位职责
2013/12/08 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
实践论读书笔记
2015/06/29 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python