Question

我有以下Javascript功能：

function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {
            document.getElementById('openOfflineDIV').style.display = 'none';
            console.log("connected");
        },
        error: function() {
            document.getElementById('openOfflineDIV').style.display = 'block';
            //I have also tried: 
            document.getElementById('openOfflineDIV').style.display = 'inline';
            console.log("disconnected");
        }
    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

此功能的目的是每秒检查互联网连接状态。如果连接处于活动状态，则div openOfflineDIV不应该可见，但如果连接丢失，则div应该是可见的。

此代码部分正常工作，这意味着如果我使用＆＃34; /＃openOfflineDIV＆＃34;导航到我的网页地址添加到url的末尾，然后页面将加载显示在屏幕上的div，然后在函数开始运行后一秒钟后消失（这意味着函数在实现连接激活后成功关闭div）

但该功能的第二部分不起作用，当互联网连接丢失时，它不会自动显示div。我已经尝试了内联和块方法，但都没有工作。我非常困惑，因为该函数肯定能够成功隐藏div（我认为这意味着我定义div的语法是正确的）。

这是我的html中的模态代码：

<div id="openOfflineDIV" class="modalOfflineDIVDialog">
  <div id="mfs">
      <div id="wrapper">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                       <td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
                  </tr>
               </table>
           </div>
      </div>
</div>

这是模态的CSS：

.modalOfflineDIVDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 11;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalOfflineDIVDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalOfflineDIVDialog > div {
    width: 760px;
    height: 545px;
    position: relative;
    margin: 1% auto;
}

正如我所说，该功能正常工作，console.logs "connected"和"disconnected"正确地出现在控制台中，并且能够成功关闭div，但我可以＆＃39;弄清楚为什么当互联网连接丢失时它不会自动显示div。

任何关于为什么不能完全运作的想法都会非常感激。

简单的Javascript show div功能不起作用

0 个答案: