Modal Close Button Not Working

This is the code. If I open the modal, the close button will not work and will not close until the page is refreshed. All I want is for the modal to close when the button is click

Solution 1:

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

Solution 2:

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/

Solution 3:

Use this in your closing button.

data-dismiss="modal"

Use it like:

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