Проблема со скрытием блока [дубликат]

222

05 января 2019, 07:40

На данный вопрос уже ответили:

Скрыть блок при клике вне 1 ответ
Закрытие блока div при клике вне него [дубликат]
Закрытие блока при клике вне него [дубликат]

Есть блок, который скрывается, если кликнуть вне него, но если я повторно нажму на кнопку, чтобы вызвать этот блок, то задний фон становится темным, но свойство display на block не меняется, его просто не видно. Как сделать, чтобы при повторном клике блок отображался? Вот код скрытия блока:

function hideCover() {
      document.body.removeChild(document.getElementById('cover-div'));
    }
var modal = document.getElementById('myModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
hideCover();
var container = document.getElementById('prompt-form-container');
container.style.display = 'none';  
}

Answer 1

Вам не надо удалять блок, так как потом вы его не пересоздадите. Нужно использовать hide() и show():

unction hideCover() { 
      if($('cover-div').is(":visible")) 
      { 
        $('cover-div').hide(); 
      }else{ 
        $('cover-div').show(); 
      } 
} 
var modal = document.getElementById('myModal'); 
window.onclick = function(event) { 
 
if (event.target == modal) { 
 
modal.style.display = "none"; 
hideCover(); 
var container = document.getElementById('prompt-form-container'); 
container.style.display = 'none';   
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Удалять блок ни к чему. Можно менять класс при нажатии, например: делать проверку класса, удалять его, если true, и менять на другой, и аналогично с обратным классом, можно оформить в jquery функции с if и методом toggle() или же простой проверкой с помощью локальной переменной