浏览器遮罩层

我们在做页面的时候难免会遇到点击之后出现一个弹窗的需求,但是弹窗出来之后发现页面其余部分还是可以点击,这是我们就需要一个遮罩层来把页面剩余的部分遮住了,一般我们都是设置一个标签,然后给标签一个class,代码如下:

html代码:
<div class="box"></div>
css代码:
.box{
      position: fixed;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background-color:black;
      opacity:0.6;
      z-index:100;
      filter:alpha(opacity=30);
      display:none;
}    
时间: 2024-10-01 01:17:35

浏览器遮罩层的相关文章

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10** Author:博客园小dee */ 比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开(或下载APP)

微信营销是网络经济时代企业或个人营销模式的一种.是伴随着微信的火热而兴起的一种网络营销方式.但是也正因为如此,微信官方的屏蔽封杀域名的规范的也越来越严格.商家与微信之间进行着微信防封防屏蔽和封杀较量,可以说微信在广告拦截,封杀方面几乎是苛刻的.任何有广告嫌疑或被举报基本都百分百进入封杀名单.从2019下半年的“拼多多”链接不再被开放绿色通道便能看出腾讯的果决. 但是即使在如此,在微信防封上面仍然还是有巨大突破的.今天我给大家分享几种微信防封的行之有效方案,以下方案基本涵盖了市面上所有的微信推广方

点击微信防封短链接强制使用浏览器打开页面的遮罩层最新实现方案!

相信在微信中做推广的朋友一定都遇到这种情况的.当你需要在微信中推广的时候会发现,自己的网页被微信屏蔽了,还有就是说APP的下载链接在微信中点击是无法下载的.必须要手动点击,右上角的三个点,然后选择在浏览器中打开,才可以顺利完成! 虽然说这个对于我们比较了解微信的朋友来说是很简单,很轻松的!但是使用微信的百分之九十都是小白,他们是不知道有这部操作的. 今天要加的是一个终极解决方法:强制使用浏览器打开页面的遮罩层. 再也不用管微信如何的更新,直接判断微信的UA,然后弹出一个遮罩提示用户在浏览器中打开

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

利用div实现遮罩层效果

利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; h

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q