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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 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
一个用于网络的工具函数库
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php关联数组快速排序的方法
2015/04/17 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
js实现计算器功能
2020/08/10 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python3遍历目录树实现方法
2015/05/22 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python中如何引入第三方模块
2020/05/27 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
简历自我评价怎么写好呢?
2014/01/04 职场文书
节水标语大全
2014/06/11 职场文书
学校四群教育实施方案
2014/06/12 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
辞职信怎么写
2015/02/27 职场文书
入党群众意见范文
2015/06/02 职场文书
计算机教师工作总结
2015/08/13 职场文书
团干部培训班心得体会
2016/01/06 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python