弹窗居中遮罩
来源:互联网 发布:imap服务器端口 编辑:程序博客网 时间:2024/05/24 01:39
借鉴:http://blog.wpjam.com/m/jquery-popup-mask-effect/
点击弹窗居中:
html: 注意:下面的弹窗div和背景div好像不能是同级,最好弹窗div属于更外层级
<div class="bg"></div>
<div class="pup">de</div>
css:
.pup{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
z-index:99999;
display: none;
background: white;
}
.bg{
position: fixed;
z-index: 3;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background:#000;
opacity:0.7;
}
JS:
平缓显示
var wHeight=$(window).height();
var wWidth=$(window).width();
$('.pup').fadeIn(2000).css({
"width":wWidth/2,
"height":wHeight/2
})
$('.bg').fadeIn(2000);
$('.bg').click(function(){
$('.bg').fadeOut(800);
$('.pup').fadeOut(800);
})
阅读全文
0 0
- 弹窗居中遮罩
- 弹窗居中遮罩
- 居中弹窗
- Web_PHP_DedeCMS_居中弹窗;
- 弹窗居中设置
- js弹窗上下居中
- div弹窗始终居中
- 弹窗垂直水平居中
- layer弹出层不居中解决方案,仅显示遮罩,没有弹窗
- js 绝对定位居中遮罩效果
- js实现遮罩弹出层居中
- 弹窗窗口在浏览器上面居中
- SWT 窗體居中
- 弹框居中 ShowMessage
- 居中
- 居中
- 居中
- 居中
- QT ComBoBox的简单应用
- 够用一年的Git 技巧
- Leetcode 算法设计 第十三周
- Windows Tensorflow GPU安装
- 可自定义图片指示器并支持自定义Tab宽度的TabLayout
- 弹窗居中遮罩
- 【分享】浅谈并发下的HashMap
- JAVA 定时器时间格式
- CCF 1029 信息加密
- POJ
- 常系数齐次线性递推优化矩阵快速幂
- 工作笔记-数据库自动备份
- spring-security番外篇
- @ManyToOne和@OneToMany