只利用jquery ,自己写个原生态的 弹框蒙层
来源:互联网 发布:一般sql培训多少钱 编辑:程序博客网 时间:2024/06/03 22:39
ps:记每次不想或者不能去导其他的包,在给别人的项目中添加弹框蒙层. 我对css不是很会用.转栽个别人的每次好复制.
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>pop window</title>
<style>
*{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.popWindow{
width: 90%;
height: 90%;
background: #abcdef;
padding: 2px;
margin: 10px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.popWindow h3{
height: 30px;
line-height: 30px;
}
.popWindow h3 span{
float: right;
font-size: 14px;
font-weight: normal;
cursor: pointer;
}
.popWindow h3 span:hover{
color: #f00;
}
.popWindow .content{
height: 80%;
background: #fff;
}
.mask{
background: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
</style>
</head>
<body style="width:2000px">
<a href="javascript:;" id="show">显示窗口</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="popWindow hide">
<h3>弹出窗口的标题<span>关闭</span></h3>
<div class="content">弹出窗口的内容</div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
var oBtn = $('#show');
var popWindow = $('.popWindow');
var oClose = $('.popWindow h3 span');
//浏览器可视区域的宽度
var browserWidth = $(window).width();
//浏览器可视区域的高度
var browserHeight = $(window).height();
//浏览器纵向滚动条距离上边界的值
var browserScrollTop = $(window).scrollTop();
//浏览器横向滚动条距离左边界的值
var browserScrollLeft = $(window).scrollLeft();
//弹出窗口的宽度
var popWindowWidth = popWindow.outerWidth(true);
//弹出窗口的高度
var popWindowHeight = popWindow.outerHeight(true);
//left的值=浏览器可视区域的宽度/2-弹出窗口的宽度/2+浏览器横向滚动条距离左边界的值
var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
//top的值=浏览器可视区域的高度/2-弹出窗口的高度/2+浏览器纵向滚动条距离上边界的值
var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
var oMask = '<div class="mask"></div>'
//遮照层的宽度
var maskWidth = $(document).width();
//遮照层的高度
var maskHeight = $(document).height();
oBtn.click(function(){
popWindow.show().animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500);
$('body').append(oMask);
$('.mask').width(maskWidth).height(maskHeight);
});
$(window).resize(function(){
if(popWindow.is(':visible')){
browserWidth = $(window).width();
browserHeight = $(window).height();
positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
popWindow.animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500);
}
});
$(window).scroll(function(){
if(popWindow.is(':visible')){
browserScrollTop = $(window).scrollTop();
browserScrollLeft = $(window).scrollLeft();
positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
popWindow.animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500).dequeue();
}
});
oClose.click(function(){
popWindow.hide();
$('.mask').remove();
});
});
</script>
</body>
</html>
阅读全文
0 0
- 只利用jquery ,自己写个原生态的 弹框蒙层
- 利用jQuery开发适合自己的插件
- 如何利用jQuery扩展自己的插件
- 自己利用jQuery框架写的一个Table类!
- 利用jQuery.expr创建一个自己的伪类选择器
- 如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 利用原生态的jdk生成 WebService客户端调用工具
- ajax基础知识,原生态ajax示例,jquery的ajax示例
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 封装自己的jquery
- 利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字
- 原创 自己封装的js alert 和confirm 利用jquery dialog
- 我只想尽自己的本份
- 自己的程序只运行一次
- 6.只谈自己的问题
- J.U.C(java.util.concurrent)原子类分类
- ThinkPHP中的文件加载
- 使用Spring
- 二分法查找有序数组中某元素个数
- ROS调试和可视化总结
- 只利用jquery ,自己写个原生态的 弹框蒙层
- 70%巨亏,资本仍在狂赌在线教育丨价值观点
- leetcode_72.Edit Distance ?待解决
- 第6章、核心存储和索引结构(Sqlserver存储、理解索引、创建修改删除索引、维护索引、索引重新生成)
- MIPI DSI 接口协议介绍
- bzoj 1937: [Shoi2004]Mst 最小生成树
- Linux远程复制 scp使用
- Myeclipse非正常关闭处理
- 陈列专家-堆头陈列