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判断字符是否是汉字的两种方法小结
Jan 03 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
vue自定义树状结构图的实现方法
Oct 18 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事务解决数据写入不完整等情况
2014/01/07 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python实现购物车功能的方法分析
2017/11/10 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
自荐书格式
2013/12/01 职场文书
党员公开承诺书内容
2014/05/20 职场文书
灵山大佛导游词
2015/02/04 职场文书
继续教育个人总结
2015/03/03 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
活动主持人开场白
2015/05/28 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL