本文实例讲述了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>www.jb51.net - 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>

转载于;https://www.jb51.net/article/126254.htm

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例的更多相关文章

  1. js实现打开网页自动弹出添加QQ好友邀请窗口

    我们有时进一些网面或专题页面会自动弹出一个加为好友的对话框了,在研究了很久之后发现可以直接使用js来实现,下面我们一起来看js实现打开网页自动弹出添加QQ好友邀请窗口的方法. 第一步.JS脚本 这个是 ...

  2. 打开网页自动弹出QQ对话框的实现办法

    Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...

  3. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  4. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  5. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  6. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  8. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. vue 工作随笔

    现在工作要做一个电商项目,将工3作的笔记记在这儿,以后方便结总 本套项目用的前端方案 是: vue vue-router Element -ui Axios Echarts 后端技术采用node.js ...

  2. 理解MySQL回表

    回表就是先通过数据库索引扫描出数据所在的行,再通过行主键id取出索引中未提供的数据,即基于非主键索引的查询需要多扫描一棵索引树. 因此,可以通过索引先查询出id字段,再通过主键id字段,查询行中的字段 ...

  3. Java集合：HashMap

    Hashmap是一个存储key-value的映射表. 优点: 索引数据快,查找一个数据对的时间复杂度是O(1) 增加.删除一个数据的时间复杂度是O(1) key不能重复,可以存储一个null值 存储: ...

  4. three.js 添加html内容、文本

    需求: 1.在场景内添加html元素并动态更新 2.html内容需跟随场景变化 方案: 新加方案:https://www.zhihu.com/question/49929467/answer/1186 ...

  5. [转载]用redis实现跨服务器session

    地址:http://blog.chinaunix.net/uid-11121450-id-3284875.html 这个月我们新开发了一个项目,由于使用到了4台机器做web,使用dns做负载均衡, 上 ...

  6. MFC获取文件路径和文件夹路径

    MFC的界面中,需要实现这样两个功能: 1.在界面上加一个按钮,单击按钮弹出一个对话框选择文件,在工程中获得文件的路径: 2.在界面上加一个按钮,单击按钮弹出一个对话框选择文件夹,在工程中获取文件夹的 ...

  7. MyBatis封装对象内的List出现的问题

    本篇文章问题1:wife的复数形式是wives,不是wifes,英语不好请见谅. 对象举例: class User { private String username; private List< ...

  8. 十一、Abp vNext 基础篇丨测试

    前言 祝大家国庆快乐,本来想国庆之前更新完的,结果没写完,今天把剩下的代码补了一下总算ok了. 本章节也是我们后端日常开发中最重要的一步就是测试,我们经常听到的单元测试.集成测试.UI测试.系统测试, ...

  9. [源码解析] PyTorch 流水线并行实现 (6)--并行计算

    [源码解析] PyTorch 流水线并行实现 (6)--并行计算 目录 [源码解析] PyTorch 流水线并行实现 (6)--并行计算 0x00 摘要 0x01 总体架构 1.1 使用 1.2 前向 ...

  10. 怒肝 Linux 学习路线，这回不难

    Linux 学习路线 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮,又花 1 周肝出了 Linux 学习资料全家桶,包括学习路线.命令手册.视频.书籍.文档.实战教程.社区.工具.大 ...