<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript">
var ws = null,
wc = null;
// 扩展API加载完毕,现在可以正常调用扩展API
function plusReady() {
ws = plus.webview.currentWebview();
// 用户点击后
ws.addEventListener("maskClick", function () {
wc.close("auto");
}, false);
}
// 判断扩展API是否准备,否则监听"plusready"事件
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 显示侧滑页面
function showSide() {
// 防止快速点击可能导致多次创建
if (wc) {
return;
}
// 开启遮罩
ws.setStyle({
mask: "rgba(0,0,0,0.5)"
});
// 创建侧滑页面
wc = plus.webview.create("webview_mask_side.html", "side", {
left: "30%",
width: "70%",
popGesture: "none"
});
// 侧滑页面关闭后关闭遮罩
wc.addEventListener('close', function () {
ws.setStyle({
mask: "none"
});
wc = null;
}, false);
// 侧滑页面加载后显示(避免白屏)
wc.addEventListener("loaded", function () {
wc.show("slide-in-right", 200);
}, false);
}
</script>
</head>
<body>
<header id="header">
<div class="nvbt iback" onclick="back()"></div>
<div class="nvtt">Webview Mask</div>
</header>
<div id="content" class="content">
<br />
<div class="button" onclick="showSide()">打开侧滑窗口</div>
<div class="des">打开侧滑窗口后,当前Webview窗口会显示遮罩层。</div>
<div class="des">Webview的遮罩层会覆盖Webview中所有内容(包括子Webview),并且截获Webview窗口的所有触屏事件。</div>
</div>
</body>
</html>
html5+ 侧滑窗口
猜你喜欢
转载自blog.csdn.net/weixin_41961749/article/details/82980546
今日推荐
周排行