無法關閉彈出式JS框

Question

我需要關閉彈出標簽的幫助。 overlay div是z索引的，因此不會隱藏close div。 這是我的代碼：

<div id='mail'>                 
  <div id="popup-overlay"></div>
   <div class="close-popup"">
  <a>X</a>
   </div>
</div>

<script>
    var mail = $('#mail');
    var overlay = $('#popup-overlay.' + pageID);
    var mailClose = $('#mail.' + pageID + ' .close-popup');

    mailClose.on('click touchstart', function(event){
    mail.removeAttr('style');
    mail.css('display', 'none');
    overlay.css('display', 'none');
  });

  mailClose.bind('mouseover', function(event){
    mailClose.css('cursor', 'pointer');
  });

  mailClose.on('blur', function(event){
      this.blur();
     });
  }
</script>

Answer 1

好的，您在摘要中提供給我們的源有一些問題，但這可能只是因為您正在復制粘貼總代碼的一部分。 這些問題是： close-popup的類定義中出現意外的“字符”；變量pageID未定義；最后腳本末尾還有一個花括號。

大概這些都不是實際問題。

我相信您遇到的問題源於您用於mailClose元素的選擇器。 具體來說，mailClose元素的選擇器不正確，因為它具有不必要的#mail元素。 我不確定pageID變量實際上是什么，但是由於您提供給我們的HTML中沒有該變量，因此也需要將其刪除，以使選擇器起作用。 一旦從第一段中刪除了那些瑣碎的錯誤以及CSS選擇器的錯誤元素，我相信我就可以按預期工作，如本jsfiddle所示 。 推測pageID實際上是一個有效值，應適當地將其添加到選擇器中。

如果您想再看一個更全面的示例，請隨意編輯源代碼並評論此答案。 希望這可以幫助，