关键词: 酷炫弹框,跳转关闭窗口,安卓手机对PC谷歌浏览器一对一跳转
一、酷炫弹框(二)开发
1.1功能开发
1)这个功能需要一个div,代码如下:
<div id="dataURL-popup" class="white_content">
<p>您确定要结束答疑吗?</p>
<button id="btn-close-dataURL-popup"style="float:center;">取消</button>
<button id="btn-sure-end-question"style="float:left;">确定</button>
</div>
2)当点结束答疑时,让这个div显示即可,如下:
$("#end_anwser").click(function(){
document.getElementById('dataURL-popup').style.display='block';
})
注:就是点结束答疑,让这个div的属性设为显示既可。
效果展示:
注:a)点取消,关闭这个弹窗,代码支持如下:
document.getElementById('btn-close-dataURL-popup').onclick =closeDataURLPopup;
function closeDataURLPopup() {
document.getElementById('dataURL-popup').style.display='none';
}
也就是把div(dataURL-popup)的属性置为不可见,这个代码还可以学到一点是,click事件可以等于一个函数(closeDataURLPopup),只是直接等于函数名,后面不加等号。
b)用户点确定时,当前页面置空,代码支持如下:
$('#btn-sure-end-question').click( function(){
window.location.href="about:blank";
return;
});
二、跳转关闭窗口
2.1 成功例子一:安卓手机+PC(谷歌)----------------跳转实现
a.手机端点结束答疑
b.老师端会收到信息,并能关闭窗口
c.效果图如下:
老师接单后,效果图如下:
老师端点开始答疑,效果如下:
此时学生端点结束答疑,手机端页面关闭;老师端收到的界面如下:
老师点确定后,会关闭当前页面,效果如下:
注:以上成功事例说明,手机端可以向老师端发消息,并且能接收成功。下一步尝试老师端点结束答疑,向学生端发消息。
d. 学生端代码支持如下:
$("#end_anwser").click(function(){
window.androidAction.finish();
connection.send('end');
})
e. 老师端代码支持如下:
else if(event.data=='end'){
document.getElementById('end_anwser').disabled = true;
alert("本次辅导用时"+mnsCommon+"分钟!知道了");
open(location,'_self').close();
return;
}
注:老师端和学生端代码,可反转,关键是谁点“结束答疑”。
2.2 老师端点结束答疑
安卓手机(学生)+谷歌浏览器(老师)
2016年11月06日星期日