本文实例讲述了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. C# 动态构建表达式树（一）—— 构建 Where 的 Lambda 表达式

    C# 动态构建表达式树(一)-- 构建 Where 的 Lambda 表达式 前言 记得之前同事在做筛选功能的时候提出过一个问题:如果用户传入的条件数量不确定,条件的内容也不确定(大于.小于和等于), ...

  2. Vue3的新特性及相关的Composition API使用

    首先 创建项目 Vue3 Vue3 相较于Vue2 的6大亮点: 1 性能快. 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了 ...

  3. symfony生成路由

    控制器里生成地址 $this->generateUrl('course_manage_show_test', array('id' => 1)) twig前端文件生成地址: {{ path ...

  4. Hystrix配置实战及feign超时配置失效

    一.feign超时配置失效 最近项目上遇见feign超时配置总是失效.导致feign调用超过2s之后就会超时,会进行自动重试,重复调用两次服务,并且还是指定接口.这就更加奇怪.最后通过观察以及源码调试 ...

  5. spring入门1-IOC和DI

    1.概述 1.1.简介 Spring是分层的 Java SE/EE应用 full-stack 轻量级开源框架,以 IoC(Inverse Of Control:反转控制)和 AOP(Aspect Or ...

  6. contos 安装 nginx

    参考链接https://blog.csdn.net/u011159417/article/details/80081992 https://blog.csdn.net/wangxy_job/artic ...

  7. 浅析Java中的static关键字

    关键点 <Java编程思想>对static方法的描述:"static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没有创建对象的 ...

  8. CF622F-The Sum of the k-th Powers【拉格朗日插值】

    正题 题目链接:https://www.luogu.com.cn/problem/CF622F 题目大意 给出\(n,k\),求 \[\sum_{i=1}^ni^k \] 解题思路 很经典的拉格朗日差 ...

  9. 深入浅出WPF-06.Binding（绑定）01

    Binding(绑定) 先上图,再解释 针对这个图,我们先来说说什么是Binding. Binding就是一个桥梁,建立在数据和UI之间的桥梁.既然是数据驱动,那么我们就把数据称之为"源&q ...

  10. 轻松集成腾讯云短信服务实现短信发送（Java实现）

    不论是阿里云还是腾讯云,要想在网站上实现短信发送功能,首先得保证你的网站域名是通过备案的,因为短信签名是需要用到备案过的域名截图,所以域名通过了,申请很快就会审批成功了. (说点题外话,备案的话,需要 ...