HTML / JS модальная загрузка

Question

Моя проблема в том, что я не могу автоматически показать мой модал.

В лучшем случае мне нужен таймер, который открывает модал (например, через 10 секунд после загрузки страницы).

https://codepen.io/martin-len/pen/ExjJayx

<script>

// Working metods to open modal with button.
var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

btn.onclick = function() {
  modal.style.display = "block";


}

// And here im trying open modal automaticaly. All methods dont work.

// method 1
$(document).ready(function(){
modal.style.display = "block";
});

// method 2
window.onload = function(){ 
    modal.style.display = "block";
}

$(document).ready(function(){
$("#myModal").modal('show');
});

</script>

Answer 1

Я бы сказал, что ответ Эиссона технически правильный. Стоит сообщить, ПОЧЕМУ это происходит с вами.

Смотрите здесь.

var modal = document.getElementById("myModal");

window.onload = function(){ 
    modal.style.display = "block";
}

Обратите внимание на переменную modal . Он определяется в любой области видимости.

Теперь, обратите внимание, как window.onload - это еще одна функция . Это нарушает область видимости и доступность модальной переменной.

Однако вы можете использовать ответ Eisson. Это бы УДАЛЕНО модально из предыдущего рендеринга области, недоступной вне функции onload.

Итак, вы можете изменить приведенный выше код на

window.onload = () => { 
    modal.style.display = "block";
}

. техническое различие между функциями и функциями стрелок, о которых вы можете прочитать на этом ресурсе. И Eisson, и мой собственный ответ будут работать. Мой ответ оставляет модальный характер в указанной вами области и минимально меняет шаблон, который вы предоставили.

Функции стрелок и функций

Answer 2

Здесь работает: https://codepen.io/ealipio/pen/mdJgyYK

window.onload = function(e){   
  var modal = document.getElementById("myModal");
  var btn = document.getElementById("myBtn");

  modal.style.display = "block";
}

проблема в том, что вы должны использовать эти методы при загрузке всей страницы. это происходит внутри события window.onload.

Надеюсь, что это поможет.