模式關閉按鈕不起作用

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>