onclick event don't work on WEB page
Question
I want to create a modal box. It should appear, when a user clicks a button, and close, when the user clicks a close button in the modal box. I made two functions:
- check() : it change css. After it's elememt onclick, appears modal box
- close() : this function should close modal box, but it doesm't. It simply should set previous css setting. This function isn't execution at all when I click a close button(span element).
Why close function doesn't work and what I should modernize to get a result?
Thanks in advance)
function check() { var modal = document.getElementById("myModal"); modal.style.display = "block"; } //this function dont't work 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>
1 answers
solution1
3 ACCPTED 2018-01-16 14:44:30
close is already the name of a native browser function, window.close() . Rename your function and it works fine:
function check() { var modal = document.getElementById("myModal"); modal.style.display = "block"; } function closeModal(){ 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="closeModal()">×</span> <p >Some text in the Modal..</p> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why javascript function don't work for onclick event
Don't understand why onclick event not firing
My onclick event performs when the page loads instead of when the button is clicked, and i don't know why
Why don't these OnClick and OnKeyDown Events work?
Onclick function don't work with muut
onclick and ontouchstart don't work on mobile
Links in page don't work
WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs
onClick event doesn't work in Firefox
onclick event doesn't work in span tag
Related Tags