iPad - 点击弹出窗口激活其下方的表单控件

Question

我的网页上有一个帮助图标，用户可以点按该图标来显示帮助信息。此信息显示为弹出窗口。然后，用户可以点击弹出窗口上的任意位置来关闭它。

我的问题是，当我点击弹出窗口关闭它时，弹出窗口下面的任何表单控件也就像被点击一样。如何防止此行为？

以下是我用于弹出窗口的示例HTML代码：

<span class="popup_wrapper">
    <span class="info_popup_icon">?</span>
        <div id="popup_sample_instructions" class="info_popup">
          <ul>
            <li class="info_title_text">Popup Title</li>
            <li>First instruction</li>
            <li>Second instruction</li>
            <li>Third Instruction</li>
          </ul>
        </div>
    </span>
<span>

以下是相关的CSS：

.popup_wrapper {
  position: relative;
}
.popup_wrapper > .info_popup_icon {
  ...
  cursor: pointer;
}
.popup_wrapper > .info_popup {
  display: none;
  position: absolute;
  left: 0;
  top: 25px;
  min-width: 200px;
  ...
  z-index: 1;
}

如您所见，弹出窗口DIV (.info_popup)开始显示：无。事件监听器（touchstart | click）用于切换样式以显示：block。