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

Question

我想创建一个模式框。 当用户单击按钮时，它应该出现；当用户单击模式框中的关闭按钮时，它应该关闭。 我做了两个功能：

check（）：更改CSS。 在点击后，出现模式框
close（）：此函数应关闭模式框，但不是。 它仅应设置先前的CSS设置。 单击关闭按钮（span元素）时，此功能根本无法执行。

为什么关闭功能不起作用，我应该现代化什么才能得到结果？

提前致谢）

 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已经是本机浏览器函数window.close() 。 重命名您的函数，它可以正常工作：

 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