分享两款带遮罩的jQuery弹出框


Posted in Javascript onDecember 30, 2015

第一款:页面遮罩弹出框是最常见的一种状况,用jQuery完成页面遮罩弹出框,主要用的技能有JQuery,css与html。

 html代码下列:

<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
 <div id="fullbg"></div>
 <div id="dialog">
 <p class="close"><a href="#" onclick="closeBg();">封闭</a></p>
 <div>正在加载,请稍后....</div>
 </div>
</div>

css代码以下:

body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 margin:0;
}
#main {
 height:1800px;
 padding-top:90px;
 text-align:center;
}
#fullbg {
 bac千克round-color:gray;
 left:0;
 opacity:0.5;
 position:absolute;
 top:0;
 z-index:3;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity:0.5;
}
#dialog {
 bac公斤round-color:#fff;
 border:5px solid rgba(0,0,0, 0.4);
 height:400px;
 left:50%;
 margin:-200px 0 0 -200px;
 padding:1px;
 position:fixed !important; /* 浮动对话框 */
 position:absolute;
 top:50%;
 width:400px;
 z-index:5;
 border-radius:5px;
 display:none;
}
#dialog p {
 margin:0 0 12px;
 height:24px;
 line-height:24px;
 bac公斤round:#CCCCCC;
}
#dialog p.close {
 text-align:right;
 padding-right:10px;
}
#dialog p.close a {
 color:#fff;
 text-decoration:none;
}

jQuery代码以下:

<script type="text/javascript">
 //展示灰色 jQuery 遮罩层
 function showBg() {
 var bh = $("body").height();
 var bw = $("body").width();
 $("#fullbg").css({
  height:bh,
  width:bw,
  display:"block"
 });
 $("#dialog").show();
 }
 //关闭灰色 jQuery 遮罩
 function closeBg() {
 $("#fullbg,#dialog").hide();
 }
 </script>

第二款:简单制作一个jQuery遮罩层,当然也可以做成公共函数,方便以后多次使用.本教程适合新手。

首先给出html:

<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">
 <ul>
  <li>三水点靠木</li>
  <li>三水点靠木</li>
  <li>三水点靠木</li>
 </ul>
 </div>
</div>

遮罩层的样式如下:

/* 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来实现弹出层的显示和隐藏:

$(function () {
 $(".showbtn").click(function () {
 $("#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");
 });
});

总结:使用jQuery实现遮罩的思路就是点击按钮的时候触发遮罩层,过弹出层的css层级z-index让遮罩层遮住整个页面,同时通过弹出层的css层级z-index高于遮罩层,这样弹出层就高亮显示了。然后点击关闭弹出层按钮的时候,让弹出层隐藏,同时也让遮罩层隐藏。这种方法写法是比较快速的,后续有空我会把这段代码写成公共函数,这样方便多次调用。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
JavaScript小技巧整理
Dec 30 #Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 #Javascript
jQuery给元素添加样式的方法详解
Dec 30 #Javascript
Underscore源码分析
Dec 30 #Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 #Javascript
javascript实现禁止复制网页内容汇总
Dec 30 #Javascript
jquery实现树形菜单完整代码
Dec 29 #Javascript
You might like
当海贼王变成JOJO风
2020/03/02 日漫
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php 操作调试的方法
2012/07/12 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
简述JS控制台的使用
2018/07/15 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
个人授权委托书格式
2014/08/30 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android