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的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...
随机推荐
- Java执行JavaScript代码
Java执行JavaScript代码 这篇文章主要为大家详细介绍了Java执行JavaScript代码的具体操作方法,感兴趣的小伙伴们可以参考一下 我们要在Java中执行JavaScriptMetho ...
- 02-Response简单响应报文
package com.day5; import java.io.BufferedWriter; import java.io.IOException; import java.io.OutputSt ...
- MyEclipse 10 + OsChina GIt项目托管
环境:Egit+MyEclipse 10,此教程默认MyEclipse 10和Egit都已经配置好. 1.注册OsChina Git账号,网址:http://git.oschina.net/,具体注册 ...
- maven仓库配置阿里云镜像
maven仓库的默认镜像为国外镜像,下载jar包依赖非常慢,可以将镜像设置为国内的阿里云. 只需要在maven的conf的setting中配置如下: <mirrors> <mirro ...
- 地图api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python3文件的读写操作
open函数:对文件进行读写操作前,先打开文件,获取文件的句柄: open(file, mode, encoding, buffering) 参数说明 file_name:一个包含了你要访问的文件路径 ...
- 【Linux命令】Linux下的tar压缩解压缩命令详解(转)
tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个 ...
- 24种java设计模式总结和目录
https://blog.csdn.net/qq_40369829/article/details/80374131 简介原则分类创建型模式结构型模式行为型模式类图参考简介设计模式是在特定环境下,为解 ...
- Web缓存机制
Web 缓存的出现主要是为了弥补cookie带来的一些局限,当数据严格控制在客户端时,可以不用通过HTTP来持续得将数据发给服务器. 主要使用比较多的就是sessionStorage和localSto ...
- LeetCode OJ 117. Populating Next Right Pointers in Each Node II
题目 Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...