Question

我正在准备一个简单的javascript练习，教大学水平的平面设计学生如何在网上制作互动内容。

我也是javascript的新手，我写了一个简单的脚本，当你点击一个按钮时会显示一个模态框。问题是，我必须为我页面上的每个按钮创建一个新功能。有没有办法有一个功能？下面是我到目前为止的代码。

我也做了jsfiddle，但模态没有出现。它适用于我的电脑。我还将我的代码上传到my website。

<!doctype>
<html>

<head>

  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: rgba(220, 220, 220, 1);
    }
    #mainContent {
      width: 960px;
      height: 680px;
      margin: 80px auto 0 auto;
      background-image: url(home.png);
      border: 1px solid gray;
      border-radius: 8px;
      background-color: white;
    }
    #button1 {
      position: relative;
      top: 250px;
      left: 500px;
      width: 40px;
    }
    #closeButton {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 40px;
    }
    #infoBox.one {
      position: relative;
      top: 250px;
      left: 530px;
      visibility: hidden;
      width: 300px;
      margin: 0;
      background-color: white;
      border: 1px solid black;
      padding: 15px;
      text-align: center;
      border-radius: 8px;
    }
  </style>

  <script>
    function infoBox() {
      button = document.getElementById("infoBox");
      button.style.visibility = (button.style.visibility == "visible") ? "hidden" : "visible";
    }
  </script>

</head>

<body>

  <div id="mainContent">
    <a href='#' onclick='infoBox()'>
      <img id="button1" src="button.png" />
    </a>

    <div id="infoBox" class="one">
      <p>Your information goes here.</p>

      <a href='#' onclick='infoBox()'>
        <img id="closeButton" src="close.png" />
      </a>
    </div>
  </div>

</body>

</html>

Answer 1

您可以尝试的简单方法是利用点击事件冒泡DOM树（事件委托）这一事实。因此，使用这个想法，您可以将一个事件处理程序绑定到父容器（例如body）并处理来自那里的所有点击：

document.body.addEventListener('click', function(e) {
    if (e.target.parentNode.className === 'btn-modal') {
        infoBox();
    }
}, false);

注意：我正在检查parentNode的类，因为点击发生在图片元素上，该元素是.btn-modal链接的子元素。以下是处理委托事件的通用方法的版本，而不依赖于我们所知道的父节点： http://jsfiddle.net/4w37mkse/2/ 如果您感兴趣。

在上面的例子中，我表示我们希望我们的侦听器使用特定类处理的按钮：

<a href='#' class="btn-modal">
    <img id="button1" src="http://www.jordankennedy.com/example/button.png"/>
</a>

这是一个非常天真和基本的例子，但它证明了这个想法。

Web图表的Javascript模态

1 个答案:

演示：http://jsfiddle.net/4w37mkse/1/