Question

我该如何复制？我尝试过使用class =＆＃34; my_popup＆＃34;在div上，但它导致它不会隐藏第二个元素上的内容。

jQuery插件是http://dev.vast.com/jquery-popup-overlay/。

无论出于何种原因，使用课程都不起作用？

这个单一实例可以正常使用id作为选择器：

<div id="myModal">Filename</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_popups">

    <p id="my_popup">"$GPGGA,172247.103,,,,,0,0,,,M,,M,,*4F
$GPGGA,172257.000,3027.4646,N,09008.6986,W,1,13,0.81,21.2,M,-26.0,M,,*6F
$GPGGA,172307.000,3027.4661,N,09008.6977,W,1,14,0.71,23.3,M,-26.0,M,,*6B
$GPGGA,172317.000,3027.4681,N,09008.6962,W,1,14,0.71,23.9,M,-26.0,M,,*6A
$GPGGA,172327.000,3027.4683,N,09008.6927,W,1,14,0.72,23.5,M,-26.0,M,,*65
$GPGGA,172337.000,3027.4684,N,09008.6880,W,1,14,0.71,23.3,M,-26.0,M,,*6A
$GPGGA,172347.000,3027.4679,N,09008.6880,W,1,17,0.62,23.4,M,-26.0,M,,*69
$GPGGA,172357.000,3027.4679,N,09008.6880,W,1,17,0.62,23.4,M,-26.0,M,,*68
$GPGGA,172407.000,3027.4679,N,09008.6881,W,1,18,0.60,23.3,M,-26.0,M,,*61
$GPGGA,172417.000,3027.4678,N,09008.6881,W,1,19,0.58,23.3,M,-26.0,M,,*6B
$GPGGA,172427.000,3027.4675,N,09008.6899,W,1,19,0.57,23.2,M,-26.0,M,,*62
$GPGGA,172437.000,3027.4688,N,09008.6963,W,1,19,0.57,21.7,M,-26.0,M,,*62
$GPGGA,172447.000,3027.4690,N,09008.6973,W,1,18,0.59,20.3,M,-26.0,M,,*67
$GPGGA,172507.000,3027.4695,N,09008.6981,W,2,18,0.59,17.3,M,-26.0,M,0000,0000*6D
$GPGGA,172517.000,3027.4697,N,09008.6981,W,2,18,0.59,15.5,M,-26.0,M,0000,0000*6A
$GPGGA,172527.000,3027.4700,N,09008.6980,W,2,18,0.59,14.1,M,-26.0,M,0000,0000*62
"</p>

  </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 id="myModal">Filename</div>

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

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

    <p class="my_popup">"$GPGGA,172247.103,,,,,0,0,,,M,,M,,*4F
$GPGGA,172257.000,3027.4646,N,09008.6986,W,1,13,0.81,21.2,M,-26.0,M,,*6F
$GPGGA,172307.000,3027.4661,N,09008.6977,W,1,14,0.71,23.3,M,-26.0,M,,*6B
$GPGGA,172317.000,3027.4681,N,09008.6962,W,1,14,0.71,23.9,M,-26.0,M,,*6A
$GPGGA,172327.000,3027.4683,N,09008.6927,W,1,14,0.72,23.5,M,-26.0,M,,*65
$GPGGA,172337.000,3027.4684,N,09008.6880,W,1,14,0.71,23.3,M,-26.0,M,,*6A
$GPGGA,172347.000,3027.4679,N,09008.6880,W,1,17,0.62,23.4,M,-26.0,M,,*69
$GPGGA,172357.000,3027.4679,N,09008.6880,W,1,17,0.62,23.4,M,-26.0,M,,*68
$GPGGA,172407.000,3027.4679,N,09008.6881,W,1,18,0.60,23.3,M,-26.0,M,,*61
$GPGGA,172417.000,3027.4678,N,09008.6881,W,1,19,0.58,23.3,M,-26.0,M,,*6B
$GPGGA,172427.000,3027.4675,N,09008.6899,W,1,19,0.57,23.2,M,-26.0,M,,*62
$GPGGA,172437.000,3027.4688,N,09008.6963,W,1,19,0.57,21.7,M,-26.0,M,,*62
$GPGGA,172447.000,3027.4690,N,09008.6973,W,1,18,0.59,20.3,M,-26.0,M,,*67
$GPGGA,172507.000,3027.4695,N,09008.6981,W,2,18,0.59,17.3,M,-26.0,M,0000,0000*6D
$GPGGA,172517.000,3027.4697,N,09008.6981,W,2,18,0.59,15.5,M,-26.0,M,0000,0000*6A
$GPGGA,172527.000,3027.4700,N,09008.6980,W,2,18,0.59,14.1,M,-26.0,M,0000,0000*62
"</p>

  </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

解决此问题的方法是自己手动打开弹出窗口。

例如，使用按钮上的数据属性来指示弹出类。并将单击事件附加到按钮以显示相关的弹出窗口。

<button data-popup="my_popup">Open popup</button>

$('[data-popup]').click(function(){
    $('.' + $(this).data('popup')).popup('show');
});

Fiddle

通过类选择器复制jQuery弹出窗口

1 个答案: