在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. python读取指定字节长度的文本

    软件版本 Python 2.7.13;   Win 10 场景描述 1.使用python读取指定长度的文本: 2.使用python读取某一范围内的文本. Python代码 test.txt文本内包含的 ...

  2. spring 生命周期最详解

    转载. https://blog.csdn.net/qq_23473123/article/details/76610052 目的 在大三开始学习spring时,老师就说spring bean周期非常 ...

  3. 深入理解volatile

    volatile知识点 --------------------------------------------------------------------------- 1.volatile关键 ...

  4. airbnb 开源reAir 工具 用法及源码解析(一)

    reAir 有批量复制与增量复制功能 今天我们先来看看批量复制功能 批量复制使用方式: cd reair ./gradlew shadowjar -p main -x test # 如果是本地tabl ...

  5. leetcode239

    class Solution: def maxSlidingWindow(self, nums: 'List[int]', k: int) -> 'List[int]': n = len(num ...

  6. String和StringBuilder、StringBuffer的区别

    String对象一旦创建之后该对象是不可更改的,但后两者的对象是变量,是可以更改的. String:适用于少量的字符串操作的情况 StringBuilder:适用于单线程下在字符缓冲区进行大量操作的情 ...

  7. 深入剖析GPU Early Z优化

    最近在公司群里同事发了一个UE4关于Mask材质的优化,比如在场景中有大面积的草和树的时候,可以在很大程度上提高效率.这其中的原理就是利用了GPU的特性Early Z,但是它的做法跟我最开始的理解有些 ...

  8. spring-security使用

    极客学院Spring Security 例子 <?xml version="1.0" encoding="UTF-8"?> <beans:be ...

  9. [phvia/firman] PHP多进程服务器模型中的惊群

    [ 典型场景 ] 典型的多进程服务器模型是这样的,主进程绑定ip,监听port,fork几个子进程,子进程安装信号处理器,随后轮询资源描述符检查是否可读可写: 子进程的轮询又涉及到 IO复用,acce ...

  10. 一直觉得用java很不顺心

    一直觉得用java很不顺心,今儿想明白一个事情.如果把汇编比作石器时代,c作为冷兵器时代,c++作为工业革命之后的热兵器及机械化时代,而c#之类则进入了现代科学世界,至于go,python之流,大概可 ...