JQuery实现笼罩层
引用Jquery1.4.2及以上版本，测试中发现引用css路径之间要加(.)请注意哦！
页面：d.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jquery实现遮罩层</title>
<!-- <link href="/css/d.css" rel="stylesheet" type="text/css" /> -->
<link href="./css/d.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"> </script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"> </script>
</head>
<body>
<p class="showbtn"><a href="javascript:void(0);">显示遮罩层</a></p>
<div id="bg"></div>
<div class="box" style="display:none">
<h2>jQuery 学习交流<a href="#" class="close">关闭</a></h2>
<div class="list">
<table>
<tr>
<td>牛B</td>
<td><input type="text" id="test"></td>
</tr>
<tr>
<td>2B</td>
<td><input type="text" id="test"></td>
</tr>
<tr>
<td>SX</td>
<td><input type="text" id="test"></td>
</tr>
<tr>
<td>BZ</td>
<td><input type="text" id="test"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".showbtn").click(function () {
alert("到我这了");
alert($(document).height());
$("#bg").css({
display: "block", height: $(document).height()
});
var $box = $('.box');
$box.css({
//设置弹出层距离左边的位置
left: ($("body").width() - $box.width()) / 2 - 20 + "px",
//设置弹出层距离上面的位置
top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
display: "block"
});
});
//点击关闭按钮的时候，遮罩层关闭
$(".close").click(function () {
$("#bg,.box").css("display", "none");
});
});
</script>
</body>
</html>
CSS：d.css
/* box */
.box{position:absolute;width:600px;left:50%;height:auto;z-index:100;background-color:#fff;border:1px #ddd solid;padding:1px;}
.box h2{height:25px;font-size:14px;background-color:#aaa;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.box h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
.box .list{padding:10px;}
.box .list li{height:24px;line-height:24px;}
.box .list li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.showbtn {font:bold 24px '微软雅黑';}
#bg{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
JQuery实现笼罩层相关推荐
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件 更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
- php 遮罩层,Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就 ...
- jQuery弹出层登录和全屏注册表单
jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...
- jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法 在页面中引入jBox.all.min.css.jquery和j ...
- 页面加载时让其显示笼罩层与加载等待图片
页面加载时让其显示笼罩层与加载等待图片(结局比较完美,过程很坎坷,所以一定总结整理下,备用): 用了ajax异步,是因为js内容不能即时的显示出来,因为js是单线程,要把队列中的任务执行完后才会执行刚 ...
- Android 画面自定义正方形笼罩层
/************************** 正方形笼罩层(调用相机用) ***************************/ public class myViewfinderView ...
- java遮罩层_[Java教程]Jquery实现遮罩层
[Java教程]Jquery实现遮罩层 0 2012-12-13 17:00:10 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS ...
最新文章
- Apache POI：解决数据库和Excel之间相互转换的烦恼~
- yii2-wx / 微信二维码接口
- 图形渲染技术分享：《GTA V 》图形分析摘要
- TurboMail邮件系统实用技巧十四：如何知道对方已经读信
- fasttext 文本分类_4种常见的NLP实践思路【特征提取+分类模型】
- asp.net 在线 mp3,wma, avi
- 如何通过统计值z看置信水平_中恨他！ 看看他如何通过这一简单技巧来改善统计信息页面...
- Mybatis配置映射文件中parameterType的用法小结
- eova使用之-集成jersey开发REST服务
- ios yytext的使html,iOS 利用YYText 实现 展开全文 功能
- 指纹识别综述(9): 指纹系统安全
- pyton 内置模块
- 错误 error C2220: 警告被视为错误 - 没有生成“object”文件 (..\..\src\caffe\util\math_functions.cpp)
- Excel-RANK函数排名与拓展
- sort函数的用法(C++排序库函数的调用)对数组进行排序，在c++中有库函数帮我们实现，这们就不需要我们自己来编程进行排序了。
- 文献简读——大肠中胰蛋白酶降解共生菌的鉴定【Identification of trypsin-degrading commensals in the large intestine】
- GNU宣言（自由软件联盟宣言书）
- 图像插值算法：最近邻插值、双线性插值
- 通过 iso 重装阿里云 ECS
- android 关机 流程_android系统关机流程分析
热门文章
- 使用Java+SSM框架+JSP开发简单在线电影推荐网 电影推荐系统 豆瓣电影爬虫 基于用户、物品的协同过滤推荐算法 大数据 机器学习 SimpleMovieRecommendOnline
- Matlab fitrsvm自带支持向量回归
- 如何将孩子的视频保存在YouTube历史记录之外
- Ubuntu编译ijkplayer so库并播放本地raw/assets文件
- C# jmail收取邮件（带附件）
- C语言实现产品管理系统
- Matlab GUI - 文件读取
- java编写桌球游戏素材小球图片_JAVA——桌球游戏（动画）
- PS2060L-ASEMI肖特基二极管PS2060L
- 机器学习8：支持向量机（SVM）