DCloud_App_Array
DCloud_App_Array
  • 发布:2014-12-26 21:32
  • 更新:2021-10-07 01:34
  • 阅读:26528

Webview窗口设置遮罩层

分类:HTML5+

在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置Webview窗口的遮罩层。
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平台显示遮罩层后仍然可以操作侧滑返回。
4 关注 分享
你猜我猜不猜 xiao127 2***@qq.com 一抱一个胖猪猪

要回复文章请先登录注册

ywg369

ywg369

回复 jinya :
只能使用webview来处理了,自带的mask不行
2016-05-17 11:04
jinya

jinya

回复 ywg369 :
请问,你解决这个问题了吗。项目正好有这个需求,文档根本就没有提示这个怎么做。。。
2016-05-15 21:32
杨浩

杨浩

怎么创建子窗口遮罩啊,或者是子视图(subview),还有就是遮罩层不可以调用ajax么???
2016-04-13 01:26
ywg369

ywg369

这样的遮罩如何自定义遮罩的样式,如:遮罩层上有文字提示等内容
2016-03-25 09:37
fywlyy

fywlyy

自定义弹窗怎么浮动在这个遮罩上边呢?
2015-12-24 12:07
DCloud_App_Array

DCloud_App_Array (作者)

回复 Cym :
在什么平台什么设备上出现此问题?请提供相关示例代码,在QQ群中对应@DCloud_iOS或@DCloud_Android开头的管理员,或者新建问题并提供完整示例代码。
2015-09-06 18:49
Cym

Cym

现在这个遮罩在子窗口存在的情况下打开被子窗口覆盖掉了,何解?
2015-09-04 12:24
DCloud_App_Array

DCloud_App_Array (作者)

要更新到新版本才生效,此版本还在内测中,会尽快发布
2014-12-31 19:11
走过风雨

走过风雨

请问是不是还需要更新框架?
2014-12-30 09:40
czf

czf

你的代码怎么不起作用啊?是新版本功能?
2014-12-28 10:32