jq给页面添加覆盖层遮罩的实例

先引入jq代码，然后代码如下：

$(function(){

 var docHeight = $(document).height(); //获取窗口高度

 $('body').append('<div id="overlay"></div>');

 $('#overlay')
  .height(docHeight)
  .css({
   'opacity': .9, //透明度
   'position': 'absolute',
   'top': 0,
   'left': 0,
   'background-color': 'black',
   'width': '100%',
   'z-index': 5000 //保证这个悬浮层位于其它内容之上
  });

  setTimeout(function(){$('#overlay').fadeOut('slow')}, 3000); //设置3秒后覆盖层自动淡出
});

以上这篇jq给页面添加覆盖层遮罩的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H

  • jQuery遮罩层效果实例分析

    本文实例分析了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" xml:l

  • jQuery弹出遮罩层效果完整示例

    jQuery弹出遮罩层效果完整示例

    本文实例讲述了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&

  • jQuery实现遮罩层登录对话框

    jQuery实现遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度等.现在何问起推荐一个带二维码的登录弹出层,可拖动.关闭,有需要的朋友可以参考一下. 结尾附有源码下载. 效果图: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="

  • jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||

  • jquery实现简单的遮罩层

    本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • jQuery实现弹出带遮罩层的居中浮动窗口效果

    jQuery实现弹出带遮罩层的居中浮动窗口效果

    本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none

  • 使用jQuery制作Web页面遮罩层插件的实例教程

    使用jQuery制作Web页面遮罩层插件的实例教程

    在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

  • jq给页面添加覆盖层遮罩的实例

    先引入jq代码,然后代码如下: $(function(){ var docHeight = $(document).height(); //获取窗口高度 $('body').append('<div id="overlay"></div>'); $('#overlay') .height(docHeight) .css({ 'opacity': .9, //透明度 'position': 'absolute', 'top': 0, 'left': 0, 'bac

  • jsp 使用request为页面添加静态数据的实例

    一,在div中插入要显示的数据! 1,以下是原网页插入数据代码: <div> <ul class="list-content"> <li><a href="">aaaaaaaaaaaaaaaaaaa</a><span>[06-29]</span></li> <li><a href="">aaaaaaaaaaaaaaaaaaa&l

  • js控制的遮罩层实例介绍

    闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: 复制代码 代码如下: <div id='newDiv1' style="display: none;"> <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> <%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/prin

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • Python Django给admin添加Action的方法实例详解

    Python Django给admin添加Action的方法实例详解

    在使用Django自带的admin后台的时候,他提供了一些默认的指令可以对数据进行操作, 比如批量删除,修改等 同样的我们也可以添加自己的指令. 创建一个Django项目 $ django-admin startproject DjangoActions $ cd DjangoActions $ python3 manage.py startapp mysite添加model 打开mysite下的models.py from django.db import models class Artic

  • layer.open组件获取弹出层页面变量、函数的实例

    最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值. 记录下解决办法. 先来看layer.open函数 再来看弹出层URL对应的页面关键代码 将表单序列化成JS对象的函数是自己封装的一个JS函数,这里就不细说了,也可以自己手动定义个JS对象,自己给该对象添加属性 最后来看主页面调用方式 打印回调函数接收的变量可以看到,获取到弹出层内用户操作的相关数据. 最后,其实关键点就在于获取ifream中指定变量或

  • python爬虫添加请求头代码实例

    这篇文章主要介绍了python爬虫添加请求头代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 request import requests headers = { # 'Accept': 'application/json, text/javascript, */*; q=0.01', # 'Accept': '*/*', # 'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7

  • CentOS6.3添加nginx系统服务的实例详解

    CentOS6.3添加nginx系统服务的实例详解 前言: 今天虚拟机上配了下服务器整理了个这个 nginx 服务 要注意 - 短横杠这个符号看看复制进去后有没有乱码,我之前就遇到这个问题,郁闷了好久才发现 提示:顶部的注释不要去除否则无法注册为系统服务, 关于:chkconfig: 2345 65 37 网上搜索总结了下意思是: 2345 为启动该服务的系统环境 65   为加载的优先级别 37   为关闭的优先级别 65,37 这两个位置的数值不能相同,也不能和其它服务的数值冲突,这个我也没

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • php处理静态页面：页面设置缓存时间实例

    通过PHP去生成一个纯静态的页面:http://www.jb51.net/article/116814.htm 问:如何触发系统生成纯静态化页面? 1.页面添加缓存时间 2.手动触发的方式 3.crontab定时扫描程序 我们来实现方案一:页面添加缓存时间 用户请求页面 => 页面是否过期 => => 否(获取静态页面) || =>是(动态页面生成一份新的静态页面) if( 如果存在这个静态文件 && 没有过期){ // 获取页面 }else{ // 重新生成一份静

随机推荐