My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose:
- check() : This function changes the CSS of an element to display the modal box when clicked.
- close() : Although this function should close the modal box by reverting the previous CSS settings, it does not seem to execute at all when the close button (span element) is clicked.
I am wondering why the close function is not working as expected and what steps I need to take in order to achieve the desired result.
Thank you in advance!
function check() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
// This function isn't functioning properly
function close(){
var modal = document.getElementById("myModal");
modal.style.display = "none";
}.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}<html>
<body>
<button id="button" type="submit" onclick="check()">Login</button>
<div id="myModal" class="modal">
<div class="modal-content" >
<span class="close" onclick="close()">×</span>
<p >Some text in the Modal..</p>
</div>
</div>
</body>
</html>