在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. Error:Execution failed for task :app:transformClassesWithInstantRunForDebug解决方案

    转自https://blog.csdn.net/student9128/article/details/53026990

  2. python3:实现字符串的全排列(无重复字符)

    最近在学一些基础的算法,发现我的数学功底太差劲了,特别是大学的这一部分,概率论.线性代数.高数等等,这些大学学的我是忘得一干二净(我当时学的时候也不见得真的懂),导致现在学习算法,非常的吃力.唉!不说 ...

  3. Ubuntu16.04下修改MySQL数据的默认存储位置

    由于在Linux下MySQL默认是存储在/var/lib/mysql目录下,mysql的数据会非常大,由于/var所划分的空间不够大,所以我们需要将mysql数据存放路径修改一下,放到大分区里面,以便 ...

  4. android 开发 更好的数据存放,回调,处理class模式,适合与各种布局适配器class一起使用

    预先导入数据模式: /** * Created by lenovo on 2018/5/18. */ public class DeivceListData { private DeivceListD ...

  5. 工作流调度器azkaban

    为什么需要工作流调度系统 一个完整的数据分析系统通常都是由大量任务单元组成: shell脚本程序,java程序,mapreduce程序.hive脚本等 各任务单元之间存在时间先后及前后依赖关系 为了很 ...

  6. codestyle 设置问题

    参考: https://blog.csdn.net/hugh77/article/details/43268195 使用 4 空格缩进,而非 TAB. 在小缩进(可以嵌套更深)和大缩进(更易读)之间, ...

  7. join() ---- 使用四种不同的分隔符连接数组元素

    var a = ['Wind', 'Rain', 'Fire']; var myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire" var ...

  8. Lua 和 C++ 交互

    step1.搭建好vs和lua相交互的环境: 1.下载一个lua5.3的源码: 2.有Lua_lib.lib这个文件: 3.开始配置: 鼠标放在工程名那: 右键选属性: 把包含目录点开进行编辑: 地址 ...

  9. java学习笔记(二):枚举值

    枚举值的作用:枚举限制了变量要有一些预先定义的值,运用枚举值可以大大减少你的代码中的漏洞,举例来说,如果我们想为一家鲜榨果汁店编个程序,就可以将杯子的尺寸限制为小中和大.这样就可以确保人们不会定大中小 ...

  10. java十进制转换成二进制数

    牢记这些呀,特别常用! 1.十进制转成二进制 String s = Integer.toBinaryString(n)  //将十进制数转成字符串,例如n=5 ,s = "101" ...