w3css 在线编辑器 | w3css代码测试

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.cainiaomax.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS 模态</h2>
  <p>在这个例子中，我们演示了如何通过在模态框外单击来关闭模态框。</p>

<div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>模态标题</h2>
      </header>
      <div class="w3-container">
        <p>您有两个方式可以关闭此模态：</p>
        <p>单击“x”或单击模态之外的任何位置！</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>模态页脚</p>
      </footer>
    </div>
  </div>
</div>

// 当用户点击模态之外的任何地方时，关闭它
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

报个问题: