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 modalvar 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">
<ulclass="price"><liclass="header">Hard Drive Format</li><liclass="grey">£10</li><li>Format Hard Drive</li><li>Removes ALL Files From Drive</li><li>Fresh Install Windows</li><liclass="grey"><buttonid="myBtn">Sign Up</button></li></ul>
</div>

<!-- TheModal -->
<divid="myModal"style="display:none;"class="modal"><!-- Modal content --><divclass="modal-content"><spanclass="close">&times;</span><p>Some text in the Modal..</p></div></div>// Get the modalvar modal = document.getElementById('myModal');

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

// Get the <span> element that closes the modalvar 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 itwindow.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>