模式关闭按钮不起作用

Question

我有包含关闭按钮和一些文本的模式div。 当我单击按钮时，此方法有效。 但是，当我单击关闭img时，此操作无效。 我不明白控制台中没有显示任何内容，但是功能不起作用。 为什么？

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault() }); var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function close() { mod.style.display = "none"; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div onclick="close()"> <i class="fa fa-close"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#">close</a> adipisicing elit.</p> </div> 

Answer 1

您必须重命名关闭功能。 如果您使用close则Javascript将阻止其触发。 我通常在开头加下划线:)

 var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function _close() { mod.style.display = "none"; appereance = true; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; cursor: pointer; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div > <i class="fa fa-close" onclick="_close()"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#">close</a> adipisicing elit.</p> </div> 

Answer 2

close（）已经是预定义的函数。 请将该函数的名称更改为其他名称，然后重试。

这是一个有效的例子

// Code goes here

var appereance = true;
var mod = document.getElementById("modal");

function modal() {

  if (appereance) {

    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }

}

function closeMe() {
  mod.style.display = "none";
}

Answer 3

用于“关闭”对话框的侦听器位于DIV上，该DIV是带有文本“关闭”的链接的同级对象，因此事件不会冒泡。 将侦听器移到链接。

同样，全局“关闭”引用window.close ，浏览器不会让您关闭未打开的窗口，因此什么也没有发生。 将函数的名称更改为“ closeDialogue”。

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault(); }); var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function closeDialogue() { mod.style.display = "none"; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div> <i class="fa fa-close"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#" onclick="closeDialogue()">close</a> adipisicing elit.</p> </div> 

Answer 4

我在这里更改了一些内容后，它开始工作。

1. 更正了appearance的拼写
2. 默认情况下将其称为false ，并（正确地）将其用作对话框显示的标志。
3. 使用x而不是font-awesome来显示该图标的“可关闭”符号，仅用于演示代码的工作。 您可以在以后添加超棒的CSS类。

而已！ 自己检查一下。

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault(); }); var appearance = false; var mod = document.getElementById("modal"); function modal() { if (appearance) { mod.style.display = "none"; appearance = false; } else { mod.style.display = "block"; appearance = true; } } function closeDialogue() { mod.style.display = "none"; appearance = false; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div onclick="closeDialogue()"> <i>x</i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#" onclick="closeDialogue()">close</a> adipisicing elit.</p> </div>