jquery simplemodal multiple divs

Question

我是Jquery的新手，使用SimpleModal插件創建彈出窗口。 我想在彈出窗口中一次只顯示一個內容。 我在頁面上使用三次相同的div鏈接，但我想在它們上顯示不同的內容。

現在我在同一個窗口中顯示所有三個內容。 這裏是我的代碼：

jQuery(function ($) { 

    $('.bt-menu').click(function (e) {        
    $('.content, .content2, .content3').modal({onOpen: function (dialog) { 
     dialog.overlay.fadeIn('slow', function() { 
     dialog.data.hide(); 
     dialog.container.fadeIn('slow', function() { 
      dialog.data.slideDown('slow'); 
      return false; 
     }); 
     }); 
    }}); 
}); 
}); 

所以基本上我有在其內部使用的是同一類（「BT-菜單」）單獨鏈接每個內容。 但我只想顯示隱藏在該鏈接中的內容，而不是在彈出窗口中顯示所有隱藏的div。

我知道代碼在同一時間調用所有的內容，只是不知道如何改變它？

Answer 1

你可以將它們綁定到它自己的模態對象上。

var makeModalObj = {onOpen: function (dialog) { 
     dialog.overlay.fadeIn('slow', function() { 
     dialog.data.hide(); 
     dialog.container.fadeIn('slow', function() { 
      dialog.data.slideDown('slow'); 
      return false; 
     }); 
     }); 
    }}; 

jQuery(function ($) { 

    $('.bt-menu').click(function (e) {  

    $('.content').modal(makeModalObj); 
    $('.content2').modal(makeModalObj); 
    $('.content3').modal(makeModalObj); 
    }); 
});