jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例


Posted in jQuery onOctober 19, 2017

本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能。分享给大家供大家参考,具体如下:

弹出层:两种方式

一是打开网页就自动弹出层
二是点击弹出

<!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>
<title>3water.com - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
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;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<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>
</head>
<body>
<div id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
  <div>正在加载,请稍后....</div>
</div>
</div>
</body>
</html>

运行效果:

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python谱减法语音降噪实例
2019/12/18 Python
windows支持哪个版本的python
2020/07/03 Python
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
小学生开学感言
2014/02/28 职场文书
法律进企业活动方案
2014/03/04 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python