Question

我不明白为什么这只适用于popup div的一个实例。它在这个示例html页面中正常工作：

  <!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">
    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>
<pre>TEST TEXT HERE</pre>
  </div>





  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.10/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#my_popup').popup();

    });
  </script>

但是如果我复制div以在具有多个弹出窗口的页面上使用它，它们都会失败，并且内容不会在＆＃34;隐藏＆＃34;应该的状态。它完全显示，按下打开的弹出按钮会导致页面重新加载。失败的例子：

<!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">
    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>
<pre>{{text}}</pre>
  </div>


  <!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">
    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>
<pre>{{text}}</pre>
  </div>

  <!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">
    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>
<pre>{{text}}</pre>
  </div>


  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.10/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#my_popup').popup();

    });
  </script>

Answer 1

您正在使用错误的jQuery选择器。每页不能有多个具有相同id的元素。尝试将每个弹出窗口中的id更改为class="my_popup"，将代码更改为：

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('.my_popup').popup();

    });
  </script>

Answer 2

每个弹出窗口必须具有不同的元素 id 属性：示例：

id="my_popup_1", id="my_popup_2"...

此外，打开和关闭按钮必须包含以下类：

class="my_popup_1_open", class="my_popup_1_close",
class="my_popup_2_open", class="my_popup_2_close"

按公式{id} _open和{id} _close。

选择

jQuery插件（Popup Overlay）不适用于多个div

2 个答案: