H5,为页面添加遮罩层，实现类似于点击右上角在浏览器中打开

代码实现，可以直接复制生成html文件演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><title>遮罩层</title>
</head>
<style>.content{width: 100%;height: 100%;background-color: red;}.show-mask-btn {background: rgb(4, 208, 71);padding: 5px 10px;border-radius: 5px;cursor: pointer;}.show-mask-btn p {font-size: 12px;font-weight: 400;color: #ffffff;}.mask-box {position: fixed;min-height: 100vh;background-color: rgba(0,0,0,.5);opacity: 0.5;display:none;z-index: 999;width: 100%;}.hint-txt {width: 100%;color: #ffffff;text-align: center;height: 35px;line-height: 35px;}
</style>
<body class="white-gradient-bg"><!-- 蒙版/遮罩层 --><div class="mask-box" id="download-box"><div class="hint-txt">1、点击右上角图标</div><div class="hint-txt">2、选择 在浏览器中 打开</div></div><!-- 你的内容 --><div class="content"><div class="doshow-mask-btn" id="show-mask-btn"><p>点击查看遮罩层</p></div></div>
</body>
</html>
<script>$('#show-mask-btn').click(function () {$('.mask-box').css('display','block');})
</script>

这里有些需要注意的地方：

1、遮罩层div，一定要放在所有元素最上方。如下图标红色框框的实例

H5,为页面添加遮罩层，实现类似于点击右上角在浏览器中打开相关推荐

html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
天地图添加遮罩层效果
天地图引入就不写了,这里写引入最基本的地图后,怎样变成遮罩效果 1,思路:外部是蓝色遮罩层,中间镂空为新乡市地图.通过天地图demo修改为自己想要的效果. 2,阿里云下载新乡市四周边界坐标对数据进 ...
js 添加遮罩层（加载中效果）
1. 添加遮罩层 this.mask = document.createElement('div');this.mask.style.width = window.innerWidth + 'px'; ...
微信打开网址添加在浏览器中打开提示遮罩
原文链接:http://caibaojian.com/weixin-tip.html 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基本失效 ...
web页在微信中访问增加遮罩层右上角弹出在浏览器中打开
web页在微信中访问增加遮罩层右上角弹出在浏览器中打开 <style type="text/css"> * {margin: 0;padding: 0; }a {te ...
js判断H5页面是否是在QQ\UC浏览器中打开
js判断H5页面是否是在QQ\UC浏览器中打开 var u = navigator.appVersion; var uc = u.split('UCBrowser/').length > 1 ? ...
h5页面提示只能在微信浏览器中打开_h5移动端开发判断只能在微信浏览器打开...
在开发的过程中可能会遇到项目只能在微信浏览器打开的需求,那么只需要在项目的页面添加以下代码即可(单页面应用在入口文件添加即可). var ua = navigator.userAgent.toLowe ...
H5页面在微信浏览器中打开，右上角没有出现三个点
在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换 ...

H5,为页面添加遮罩层，实现类似于点击右上角在浏览器中打开

H5,为页面添加遮罩层，实现类似于点击右上角在浏览器中打开相关推荐

最新文章

热门文章