如何使用“ jQuery Popup Overlay”插件添加兩個不同的彈出窗口？

Question

我是jquery新手。 因此，您能否幫助我使用此jQuery插件通過兩個不同的按鈕添加兩個不同的彈出窗口？

jQuery Popup疊加層

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

  <button class="my_popup_open" href="#sam">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">

   my_popup

    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>

  </div>

   <div id="sam">

   sam

    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>

  </div>


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

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

    });
  </script>

這樣我們可以添加一個彈出窗口。

Answer 1

正如我所看到的演示，您有一個帶有ID的div，在腳本中您將popup屬性添加到該div，因此只需添加兩個div，然后在腳本中將兩個popup屬性添加到兩個div中，如下所示：

<div id="my_popup1">

    ...popup1 content...  

  </div>
<div id="my_popup2">

    ...popup2 content...  

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

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

    });
  </script>

Answer 2

的JavaScript

$(function () {
    // Initialize the plugin
    $('#my_popup').popup();
    $('#sam').popup();
});

的HTML

<button class="my_popup_open">Open My Popup</button> // the class name states which popup to open - 'my_popup'
<button class="sam_open">Open Sam</button> // the class name states which popup to open - 'sam'
<div id="my_popup">my_popup
    <button class="my_popup_close">Close</button> // the class name states which popup to close - 'my_popup'
</div>
<div id="sam">sunu
    <button class="sam_close">Close</button> // the class name states which popup to close - 'sam'
</div>