在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置Webview窗口的遮罩层

mask属性值为字符串类型,可取值:

  • rgba字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)";
  • “none",表示不使用遮罩层。

Webview的遮罩层会覆盖Webview中所有内容(包括子Webview),并且截获Webview窗口的所有触屏事件。此时Webview窗口的点击操作会触发maskClick事件。

// 创建Webview窗口带遮罩层
var wd=plus.webview.create('http://www.dcloud.io/','dcloud',{mask:'rgba(0,0,0,0.5)'});
wd.show(); // 动态修改Webview窗口的遮罩层
var ws=plus.webview.currentWebview();
ws.setStyle({mask:"rgba(0,0,0,0.5)"});
// 用户点击Webview窗口后不显示遮罩层
ws.addEventListener("maskClick",function(){
ws.setStyle({mask:"none"});
},false);

  

注意:

  • 显示遮罩层后仍然不会影响JS的执行;
  • 在Android平台显示遮罩层后仍然可监听到backbutton事件;
  • 在iOS平台显示遮罩层后仍然可以操作侧滑返回。

Webview窗口设置遮罩层的更多相关文章

  1. Struts2 利用AJAX 导出大数据设置遮罩层

    Struts2 利用AJAX 导出大数据设置遮罩层 需求背景: 每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面, ...

  2. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  3. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  4. 在HTML中实现和使用遮罩层

    Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...

  5. 在jQuery环境下制作轻巧遮罩层

    遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示 ...

  6. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  7. css实现遮罩层,父div透明,子div不透明

    使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...

  8. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

  9. fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭

    在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...

随机推荐

  1. 廖雪峰Java7处理日期和时间-3java.time的API-1LocalDateTime

    1.java.time提供了新的日期和时间API: LocalDate/LocalTime/LocalDateTime ZoneDateTime/ZoneId Instant Formatter 新A ...

  2. Centos7 安装redis集群哨兵模式

    https://blog.csdn.net/lihongtai/article/details/82826809

  3. Python 面向对象(三)

    继承的实现原理 Python支持多继承 多继承的时候  属性查找的顺序 研究经典类和新式类在属性查找的不同 主要是形成菱形关系才有深度跟广度 广度优先 Python的继承原理  Python3的内置方 ...

  4. 好看的java集合类图

    http://blog.csdn.net/iamzp2008/article/details/38151971?utm_source=tuicool&utm_medium=referral 现 ...

  5. [sharepoint]修改Item或者File的Author和Editor

    写在前面 最近项目中调用sharepoint rest api方式获取文件或者Item列表,而用的方式是通过证书请求,在上传文件,或者新建item的时候,默认的用户是在sharepoint端注册的用户 ...

  6. 10K+,深度学习论文、代码最全汇总!

    我们大部分人是如何查询和搜集深度学习相关论文的?绝大多数情况是根据关键字在谷歌.百度搜索.想寻找相关论文的复现代码又会去 GitHub 上搜索关键词.浪费了很多时间不说,论文.代码通常也不够完整.怎么 ...

  7. bitbucket 上公钥SSH key如何add key并进行项目运用

    前提:从sourcetree 添加项目时老是拉取不下来,查到原因是应为bitbucket需要SSH key公钥 目的:公钥相当于你在任何一台电脑只要有公钥授权就可以随时提交代码到服务器 原因: 1.很 ...

  8. C#各种小问题汇总不断更新

    IIS Express Worker Process已停止工作-->管理员身份运行CMD 输入netsh winsock reset 回车OK 未能从程序集“System.ServiceMode ...

  9. Java内存泄漏定位

    Java虚拟机内存分为五个区域:方法区,堆,虚拟机栈,本地方法栈,程序计数器.其中方法区和堆是java虚拟机共享的内存区域,虚拟机栈,本地方法栈,程序计数器是线程私有的. 程序计数器(Program ...

  10. matlab-可视化图像阈值选择GUI工具

    话不多说,先看图,这是导入一张图后运行的效果. 在此函数中,左图是灰度图加上colorBar后的彩色效果图,右图是二值化后的图,下面是可调节阈值的灰度直方图. 左上角的按钮是回归初始状态,右上角的按钮 ...