modal使用JavaScript控制模态框显示与隐藏

<div class='\"modal\"' id='\"myModal\"'>

  <span class='\"close\"'>×span>

  <p>这是模态内容p>

div>

在上述代码中，.modal是模态的类名，#myModal是模态的ID，×是一个关闭按钮，它的类名为close，用于表示“关闭”。

接下来，我们可以使用JavaScript来控制模态的显示和隐藏。为了隐藏模态，可以使用如下代码：

var modal = document.getElementById(\"myModal\");

var span = document.getElementsByClassName(\"close\")[0];

span.onclick = function() {

  modal.style.display = \"none\";

};

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = \"none\";

  }

};

这段代码获取了模态元素和关闭按钮元素，并分别为它们绑定了点击事件。当点击关闭按钮或模态外部时，modal.style.display被设置为none，使得模态消失。

为了显示模态，我们可以为触发元素（如按钮）添加点击事件监听器：

var openBtn = document.getElementById(\"openBtn\");

openBtn.onclick = function() {

  modal.style.display = \"block\";

};

这里假设我们有一个元素，其id为openBtn，当用户点击按钮时，模态将显示。

为了增强用户体验，可以使用CSS3来为模态添加过渡动画效果：

.modal {

  display: none;

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.4);

  transition: opacity 0.5s ease-in-out;

}

.modal.show {

  display: block;

}

当modal元素添加show类时，模态会淡入显示，而移除show类时则会淡出隐藏。