Простой Javascript функция показать DIV не работает

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 должен быть виден.

Этот код частично работает, что означает, что если я перейду на мой адрес веб-страницы с «/ # openOfflineDIV», добавленным в конец 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; 
} 

Как я сказал, что функция наполовину работает, консоль. журналы "connected" и "disconnected" отображаются в консоли правильно, и он может закрыть div успешно, но я не могу понять, почему он не будет показывать div автоматически, когда интернет-соединение будет потеряно.

Любые идеи о том, почему это не работает полностью, будут действительно оценены.

Answer 1

В вашем CSS для скрытого блока добавил собственности opacity:0 так что вам нужно изменить его на 1, если вы хотите увидеть, что деление при изменении display Недвижимость

Answer 2

Попробуйте

$('#openOfflineDIV').hide(); скрыть

и этот

$('#openOfflineDIV').show(); показать!

Answer 3

Вы можете попробовать ниже код, чтобы показать/скрыть вместо style.display:

$('#openOfflineDIV').show(); 
$('#openOfflineDIV').hide();