[TOC]
# jQuery点击遮罩弹出层固定居中
## html代码
~~~
<!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" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<title>jQuery点击遮罩弹出层固定居中代码 - 站长素材</title>
</head>
<body>
<br><br><br><br><br><br><br>
<center>
<div>
<button type="button" id="ClickMe">点击显示弹窗遮罩</button>
</div>
</center>
<div id="goodcover"></div>
<div id="code">
<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="images/close.gif"></a></div>
<div class="goodtxt">
<p>微信扫一扫</p>
<p>将您的团购分享到朋友圈</p>
<p>让更多朋友知道哦~</p>
</div>
<div class="code-img"> <img id="ewmsrc" src="images/code.jpg"></div>
</div>
<script>
$(function() {
//alert($(window).height());
$('#ClickMe').click(function() {
$('#code').center();
$('#goodcover').show();
$('#code').fadeIn();
});
$('#closebt').click(function() {
$('#code').hide();
$('#goodcover').hide();
});
$('#goodcover').click(function() {
$('#code').hide();
$('#goodcover').hide();
});
/*var val=$(window).height();
var codeheight=$("#code").height();
var topheight=(val-codeheight)/2;
$('#code').css('top',topheight);*/
jQuery.fn.center = function(loaded) {
var obj = this;
body_width = parseInt($(window).width());
body_height = parseInt($(window).height());
block_width = parseInt(obj.width());
block_height = parseInt(obj.height());
left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
if (body_width < block_width) {
left_position = 0 + $(window).scrollLeft();
};
top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
if (body_height < block_height) {
top_position = 0 + $(window).scrollTop();
};
if (!loaded) {
obj.css({
'position': 'absolute'
});
obj.css({
'top': ($(window).height() - $('#code').height()) * 0.5,
'left': left_position
});
$(window).bind('resize', function() {
obj.center(!loaded);
});
$(window).bind('scroll', function() {
obj.center(!loaded);
});
} else {
obj.stop();
obj.css({
'position': 'absolute'
});
obj.animate({
'top': top_position
}, 200, 'linear');
}
}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
~~~
## css代码
~~~
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/*按钮样式*/
#ClickMe {
width: 200px;
height: 30px;
border: 1px solid #C40000;
background-color: #000;
color: #FFF;
margin:0 auto;
}
#goodcover {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 133%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: 0.50;
filter: alpha(opacity=80);
}
#code {
width: 300px;
height: 500px;
background-color: #fff;
padding: 10px;
position: absolute;
display: none;
left: 45%;
z-index: 1002;
}
.close1 {
width: 300px;
height: 60px;
}
#closebt {
float: right;
}
#closebt img {
width: 20px;
}
.goodtxt {
text-align: center;
}
.goodtxt p {
height: 30px;
line-height: 30px;
font-size: 16px;
color: #000;
font-weight: 600;
}
.code-img {
width: 250px;
margin: 30px auto 0 auto;
padding: 10px;
}
.code-img img {
width: 240px;
}
~~~
效果如：
- 关于我们
- ApiCloud
- 支付模块
- 微信支付--wxPay（客户端）
- 微信支付--wxPay(服务端)
- 支付宝支付--aliPay（客户端配置）
- 支付宝支付--aliPay（服务端配置）
- DoT模板
- 缓存模块
- 监听模块
- 百度定位模块
- 设置状态栏字体颜色
- 选择城市插件
- 跨页面执行方法
- 安卓-点击返回事件
- 上传图片模块
- 点击弹出放大图片层
- 魅族手机apiready问题
- 分享
- 跨win或frm执行脚本
- 关于ios数字自动识别成手机号
- 百度地图bMap
- 语音识别模块
- tabBarMenu底部导航
- 第三方登录
- QQ网站和appQQ账号的统一问题解决
- 微信登录
- QQ登录
- 微博登录
- 上拉加载、下拉刷新模块
- 图片缓存
- 文件和图片缓存机制分享
- PHP
- 支付宝及时到账
- no input file specified报错解决
- thinkphp 整合kindeditor
- 整合tpshop微信模块到thinkcmf中
- thinkphp3.1.3整合支付宝
- 网站接入QQ OAuth2.0登录教程
- ThinkPHP整合百度编辑器Ueditor
- PHP加快执行效率的写法规范
- ThinkPHP操作大全
- PHP操作大全
- Thinkphp中SQL操作返回值
- php5.3 foreach 使用&(与运算符)引用赋值要注意的问题
- mysql给字段追加值
- 阿里大鱼短信平台接入
- Navicat 导出 Mysql 数据字典
- php 面向对象全面教程
- PHP5下调用SOAP
- PHP处理时间格式添加空格
- 伪装URL请求（.htaccess）
- url请求参数加解密
- JS插件
- artDialog弹窗-页面传值
- jQuery点击遮罩弹出层固定居中
- jeBox原生弹窗
- bxslider轮播
- js生成指定位数随机数
- 发送短信倒计时
- js调试
- jQuery.validator 表单验证规则
- Swiper 轮播
- 获得焦点时-图片抖动
- uploadify无刷新上传图片
- 导航下拉隐藏上拉显示
- 获得焦点时-加黑色蒙版
- jquery.qrcode.js生成二维条形码(支持中文)
- jquery.qrcode.js生成二维条形码(官方不支持中文)
- nth-child 选择器
- 无刷新点击实现加载更多数据
- 刷新页面方法
- 判断滚动条向上向下
- 跨浏览器复制jQuery-zclip
- js校验表单后提交表单的三种方法
- 用JS判断下拉框是否选中
- div中滚动
- 提交时弹出模态框
- 当图片不显示时替换方法
- 前端
- CSS3
- HTML5
- css技巧
- 移动端rem
- Flex布局
- 电商详情滚动条监听
- VueCircleMenu圆环按钮
- iframe自适应页面高度
- 百度Echart
- input:radio改变选中颜色
- Jquery
- 响应式布局基本实现Media Query
- 循环输出只输出新内容
- 小程序
- wx.request坑
- 概要
- git操作
- 本地记住密码
- 操作
- 生成ssh公钥 记住密码
- git避坑
- ES6学习手札
- 调试小插件
- 谷歌插件Postman
- PHP调试助手
- WordPress
- 缓存服务器Redis
- 在线代码运行 Docker
- 在ubuntu下怎样安装https
- BrowserSync 浏览器同步测试工具
- getmarkman高效的设计稿标注、测量工具
- PHPstrom软件
- 服务器
- linux 安装搭建服务器配置及nginx配置
- tpshop的nginx 服务器配置方法
- （服务器访问文件404解决办法）IIS 之 添加MIME扩展类型及常用的MIME类型列表
- mysql部分
- mysql缓存
- MySql监控工具--mytop
- MySql主从搭建
- mysql优化
- Mysql 复制 （主从复制）
- iOS开发笔记 - 上线流程
- VUE避坑指南
- 从零开始学Vue
- Vue-cli
- Webpack
- VUE小记
- npm打包空白
- 打包背景图片/项目图片不显示
- VUE避坑指南/elementUI upload 自定义http-request上传
- 关于watch监听路由重复加载方法
- 解决加载内容的时候闪动问题
- vuecli没有network访问地址
- python学习
- python初始
- pytho内置函数大全
- win10 播放器播放TS文件问题
- 设计网站
- VUE避坑指南/VUE-CLI部署空白
- swiper使用问题
- uni-app学习手册
- 目录结构
- layUI
- nodesass版本sassloader版本问题