模态关闭按钮不起作用

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会阻止它被触发。我通常在开头添加下划线:)）

＆＃13;

＆＃13;

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;
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这是一个有效的example

// 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

聆听＆＃34;关闭＆＃34;对话是在DIV上，这是与文本＆＃34;关闭＆＃34;的链接的兄弟，所以事件不会冒泡到它。将侦听器移动到链接。

此外，全球＆＃34;关闭＆＃34;引用 window.close ，浏览器不会让你关闭一个你没有打开的窗口，所以没有任何反应。将函数名称更改为＆＃34; closeDialogue＆＃34;。

＆＃13;

＆＃13;

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";
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在我改变了一些事情后，它正在工作。

1. 更正了false
的拼写
2. 默认情况下调用x，并将其（正确）用作对话框显示的标志。
3. 使用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; }代替font-awesome以显示＆＃34;可关闭的＆＃34;签署该图标只是为了演示代码的工作。您可以稍后为它添加字体很棒的CSS类。

那就是它！自己检查一下。

＆＃13;
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
None
＆＃13;
＆＃13;
＆＃13;