Modal close button not working

Question

This is the code. If I open the modal, the close button will not work and will not close until the page is refreshed.

// 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";
  }
}

/* Create three columns of equal width */

.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}


/* Style the list */

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}


/* Add shadows on hover */

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}


/* Pricing header */

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}


/* List items */

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}


/* Grey list item */

.price .grey {
  background-color: #eee;
  font-size: 20px;
}


/* The "Sign Up" button */

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}


/* Change the width of the three columns to 100% 
    (to stack horizontally on small screens) */

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<div class="columns">
  <ul class="price">
    <li class="header">Hard Drive Format</li>
    <li class="grey">£10</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey"><button onclick="document.getElementById('myModal').style.display='block'">Sign 
    Up</button></li>
  </ul>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

All I want is for the modal to close when the button is clicked.

Answer 1

Use this in your closing button.

data-dismiss="modal"

Use it like:

<button type="btn btn-default" data-dismiss="modal">CLOSE</button>

Answer 2

In your code there is no element with id myBtn

so remove the following code

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

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

and it will work fine

Answer 3

You didn't gave the button an ID. So the javascript was failing on that line where you were adding an event listener to the button. So the statement that follows were not executed.

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button id="myBtn">Sign Up</button></li>
</ul>
</div>

<!-- The Modal -->
<div id="myModal" style="display:none;" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
</div>

</div>

// 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";
}
}

Here is the solution : https://jsfiddle.net/xf7whk0o/