停止/銷毀 jQuery 中的 Magnific Popup

Question

我想防止在單擊按鈕且未選中任何復選框時顯示 magnificPopup 對話框。

這是我已經嘗試過的：

$('[id$=DeleteSelectedItems]').click(function (evt) {
  if ($("#datatable :checked").length == 0) {
    evt.preventDefault();
    $.magnificPopup.remove(); //prevent dialog popup if no checkbox selected
  }
});

上面的代碼正在做我想要的，除了 $.magnificPopup.remove(); 不是有效的 function。

所以雖然 $.magnificPopup.remove(); 防止彈出窗口顯示，（因為它破壞了 JavaScript。）它不是有效的 function，並且在測試時我的控制台中出現錯誤。 我試過 $.magnificPopup;destroy()。 和 $.magnificPopup;stop()。 但它們也無效。

非常感謝您為此提供的任何幫助！

Answer 1

也許evt.preventDefault（）; 足以停止彈出窗口的顯示，您可以刪除代碼行$ .magnificPopup.remove（）;。 這樣可以避免控制台中的錯誤。

Answer 2

多謝您的回覆。 我最終使用$ .magnificPopup.close（）; 但是，重要的是，我將代碼放到了大型彈出式窗口初始化之后 。 以前，我在初始化之前就擁有它。 愚蠢的錯誤！ 所以我的jQuery是：

// initialise magnific popup
$('.open-popup-link').magnificPopup({
   type: 'inline',
   midClick: true
});

//don't fire the delete button if no checkbox selected in table with id of datatable
$('[id$=DeleteSelectedItems]').click(function (evt) {
   if ($("#datatable :checked").length == 0) {
       evt.preventDefault();
       $.magnificPopup.close(); //prevent dialog popup if no checkbox selected
    }
}); 

非常感謝您為我指明了正確的方向！ :)

Answer 3

這是根據以下代碼段中的 HTML 標記銷毀 magnificPopup的方法：

    $.magnificPopup.close();
    $('.thumbs').off('click');
    $('.thumbs a').off('click');

 // initialize magnificPopup function initMagnificPopup() { $('.thumbs').magnificPopup({ type: 'image', delegate: 'a', gallery: { enabled: true } }); } // destroy magnificPopup function destroyMagnificPopup() { $.magnificPopup.close(); $('.thumbs').off('click'); $('.thumbs a').off('click'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button> <div class="thumbs"> <a href="https://picsum.photos/id/237/800.jpg" target="_blank"> <img src="https://picsum.photos/id/237/100.jpg"> </a> <a href="https://picsum.photos/id/1003/800.jpg" target="_blank"> <img src="https://picsum.photos/id/1003/100.jpg"> </a> <a href="https://picsum.photos/id/1011/800.jpg" target="_blank"> <img src="https://picsum.photos/id/1011/100.jpg"> </a> <a href="https://picsum.photos/id/1025/800.jpg" target="_blank"> <img src="https://picsum.photos/id/1025/100.jpg"> </a> </div> <button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>