本文实例讲述了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('http://www.jb51.net/');">查看脚本之家</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"
<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;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('http://www.jb51.net/');">查看脚本之家</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浏览器居中显示效果的更多相关文章

  1. 简单的 jQuery 浮动层随窗口滚动滑动插件实例

    写了一个非常简单的 jQuery 插件实例  浮动层随窗口滚动滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  2. 浮动层固定兼容IE6 position:fixed的最佳解决方案

    第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...

  3. 浮动的div无论窗口大小变化都能居中显示的js

    当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值) 可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件) 之后再获取 ...

  4. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  5. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  6. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  8. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  9. DIV浮动层被OCX控件遮蔽解决方案

    在开发中需要在网页中嵌入OCX控件,但是控件嵌入后,总是会出现在网页最顶层,页面中的浮动DIV总是不能正常显示,会被遮蔽掉,那么这里就需要特殊处理一下: OBJECT会遮蔽掉页面内容,但是IFRAME ...

随机推荐

  1. 微信小程序保存图片功能实现

    小程序保存图片功能实现 wxml: <view class="previewImage" style="display:{{previewImage}}" ...

  2. ant font 本地化

    要解决的问题1.antd默认iconfont指向的是阿里在公网CDN上部署的url 2.项目需要在本地进行部署,使用的是本地文件的访问方式,希望能内网/离线使用 在ant-design-pro中的配置 ...

  3. XML-RPC.NET

    XML-RPC.NET 是一个 .NET 的客户端服务器的基于 XML-RPC 远程过程调用的框架. 示例代码: [XmlRpcUrl("http://betty.userland.com/ ...

  4. java通过CLASSPATH读取包内文件

    读取包内文件,使用的路径一定是相对的classpath路径,比如a,位于包内,此时可以创建读取a的字节流:InputStream in = ReadFile.class.getResourceAsSt ...

  5. LNMP架构二

    Nginx默认虚拟主机 1.首先修改nginx.conf文件,删除server及下面的,在http最后添加include vhost/*.conf; (指定虚拟主机目录,并读取以.conf结尾的文件) ...

  6. 设置iptables允许ssh、http、ftp服务

    系统环境:centos-6.5 服务器:thinkserver 知识扫盲: NEW:这个包是我们看到的第一个包 ESTABLISHED:一个连接要从NEW变 为ESTABLISHED,只需要接到应答包 ...

  7. Request介绍及演示样例 PART1

    Request在ServletAPI的规范连接地址http://blog.csdn.net/zghwaicsdn/article/details/51035146 HTTP简介 URL是浏览器寻找信息 ...

  8. excel weekday

    weekday(日期值)=星期几 星期天是1 星期六是7

  9. Resources.FindObjectsOfTypeAll<T>()的坑(Ghost prefab)

    今天遇到了一个Bug,因为调用Resources.FindObjectsOfTypeAll<T>()遍历整个场景,结果遍历出的对象不对.比较哈希一查果然是两个.原来prefab本身和pre ...

  10. Atitit.ati  str  字符串增强api

    Atitit.ati  str  字符串增强api 1. java StringUtils方法全览 分类: Java2011-11-30 17:22 8194人阅读 评论(2) 收藏 举报 javas ...