第91篇酷炫弹框(二)及跳转关闭窗口开发

关键词： 酷炫弹框,跳转关闭窗口,安卓手机对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日星期日