onclick事件在WEB页面上不起作用

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. check（）：更改CSS。 After it's elememt onclick, appears modal box 在点击后，出现模式框
close() : this function should close modal box, but it doesm't. close（）：此函数应关闭模式框，但不是。 It simply should set previous css setting. 它仅应设置先前的CSS设置。 This function isn't execution at all when I click a close button(span element). 单击关闭按钮（span元素）时，此功能根本无法执行。

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()">&times;</span> <p >Some text in the Modal..</p> </div> </div> </body> </html>

Answer 1

close is already the name of a native browser function, window.close() . close已经是本机浏览器函数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()">&times;</span> <p >Some text in the Modal..</p> </div> </div> </body> </html>

onclick事件在WEB页面上不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-01-16 14:44:30

onclick事件在WEB页面上不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-01-16 14:44:30

解决方案1
3 已采纳 2018-01-16 14:44:30