Webview窗口设置遮罩层
在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窗口设置遮罩层的更多相关文章
- Struts2 利用AJAX 导出大数据设置遮罩层
Struts2 利用AJAX 导出大数据设置遮罩层 需求背景: 每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面, ...
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- 在HTML中实现和使用遮罩层
Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...
- 在jQuery环境下制作轻巧遮罩层
遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示 ...
- 纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- css实现遮罩层,父div透明,子div不透明
使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...
- Bootstrap.之模态框 显示在遮罩层后面
Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...
- fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭
在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...
随机推荐
- Oracle 语句整理
1 查出列当中重复的值 select ip2,count(*) from vm_info group by ip2 having count(*)>1 期中ip2为列名 vm_inf ...
- perl二维数组
[转载]出处:http://www.cnblogs.com/visayafan/ 1 数组与引用 2 声明的区别 3 访问的区别 4 添加行元素 5 添加列元素 6 访问与打印 6.1 运算符优先级 ...
- vue+窗格切换+田字+dicom显示_03
环境:vue+webpack+cornerstone ide:vs code 需求:窗格设置+拼图设置 代码: 主体:printPage.vue <div class="div mid ...
- 【Linux】【Jenkins】系统配置报反向代理设置有误问题的解决方案
1.如图所示: 2.点击更多信息,查看解决办法: https://wiki.jenkins-ci.org/display/JENKINS/Jenkins+says+my+reverse+proxy+s ...
- ubuntu 16.04 mysql5.7.17 开放远程3306端口
ubuntu 16.04 mysql5.7.17 开放远程3306端口 原创 2017年01月19日 20:33:27 标签: mysql / ubuntu 2644 开启mysql的远程访问权限 默 ...
- 04 Python数据类型
Python 数据型1. int: 1,2,3 ....2. bool: True False3. str: 存贮少量数据 'asjkdh','工查'4. list: 列表,存贮大量数据 [1,2,3 ...
- 001之IP基础对话框
在TCP/IP协议中,建立连接的两个进程(客户端和服务器)各自用一个socket(IP地址+TCP/UDP端口号)标识.在MFC中流式套接字(SOCK_STREAM)和数据报套接字(SOCK_DGRA ...
- 获取cxgrid footer内容
cxGridDBTableView1.DataController.Summary.FooterSummaryValues[4];
- nexus的安装和简介
下载nexus Nexus 是Maven仓库管理器,通过nexus可以搭建maven仓库,同时nexus还提供强大的仓库管理功能,构件搜索功能等. 下载Nexus, 下载地址:http://www.s ...
- 一个JavaBean和DTO转换的优秀案例
所有的JavaBean和DTO的互相转换接口,JavaBean转化成DTO或者DTO转换JavaBean: public abstract class Converter<A, B> { ...