分享两款带遮罩的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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
python 下载文件的几种方法汇总
2021/01/06 Python
名词解释型面试题(主要是网络)
2013/12/27 面试题
商场端午节活动方案
2014/01/29 职场文书
工地质量标语
2014/06/12 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
检察院起诉书
2015/05/20 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
大学生党课感想
2015/08/11 职场文书