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

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 一抱一个胖猪猪

要回复文章请先登录注册

9***@qq.com

9***@qq.com

请问一下 可以给Webview的遮罩层弄透传模式吗 就是有遮罩层的显示效果 且用户还可以继续操作窗口进行点击滑动这些
2021-10-07 01:34
MonikaChen

MonikaChen

回复 我是好人 :
我subNVue怎么都无法覆盖在plus.webview上面
2021-01-25 00:19
付楚

付楚

回复 1***@qq.com :
我也是同样的需求,请问你的问题解决了吗?
2019-01-26 14:52
晓秋寒

晓秋寒

回复 2***@qq.com :
想知道你怎么给子页面加上遮罩的呀,7-7,我遮罩只能给头部和底部加上,
2018-03-27 19:51
我是好人

我是好人

subNview怎么设置遮罩?
2018-03-02 10:23
2***@qq.com

2***@qq.com

回复 你猜我猜不猜 :
我也是用的那个子页面,但是打开侧滑菜单后,遮罩通过点击可以关闭了,却不能在遮罩层上左滑关闭了,怎么解决呢?
2018-01-05 21:49
Always可接单

Always可接单

回复 1***@qq.com :
我也遇到这个问题了 请问 您解决了吗
2017-10-11 02:30
1***@qq.com

1***@qq.com

请问在遮罩上要出现一个弹窗,怎么实现呢?
2017-10-04 12:04
1***@qq.com

1***@qq.com

回复 fywlyy :
请问解决了吗
2017-10-04 12:02
44596296

44596296

你这个在父页面用,的确会把子页面和父页面都遮罩上,但是子页面里做的弹窗动画图片什么的,全部都被遮罩上了
2017-08-08 10:04