在页面加载时打开JavaScript模式

Question

I have a modal that is launched by a button. In addition to the button, I need it to launch on page load as well. Any way I can achieve this within confines of my current code?

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Answer 1

When you get the modal - simply set the style to display: block

var modal = document.getElementById('myModal');
modal.style.display = "block"

or better yet - have classes that have the styling and then add or remove the classes to show / hide the modal. You could have display: none set as the default and then an "active" class that allwos display: block when its added.

To show the modal

modal.classList.add('active') 

to hide the modal

modal.classList.remove('active') 


// css 
#myModal{
display: none;
}

#myModal.active {
display: block;
}