Bootstrap Modal而不是jQuery Dialog

Question

我有一個自定義的php腳本，它使用jQuery對話框來確認診斷框。

是initates該對話框中的JS是這樣的：

(function ($) { 
    $(function() { 
     if ($('#frmCreateUser').length > 0) { 
      $('#frmCreateUser').validate(); 
     } 
     if ($('#frmUpdateUser').length > 0) { 
      $('#frmUpdateUser').validate(); 
     } 

     $("a.icon-delete").live("click", function (e) { 
      e.preventDefault(); 
      $('#record_id').text($(this).attr('rev')); 
      $('#dialogDelete').dialog('open'); 
     }); 

     if ($("#tabs").length > 0) { 
      $("#tabs").tabs({ 
       select: function(event, ui){ 
        $("#message_box").html(""); 
        switch(ui.index){ 
         case 0: 
          $("#info_list_box").css("display", "block"); 
          $("#info_add_box").css("display", "none"); 
          break; 
         case 1: 
          $("#info_list_box").css("display", "none"); 
          $("#info_add_box").css("display", "block"); 
          break; 
        } 
       } 
      }); 
     } 
     $(".multiselect").multiselect({ 
      minWidth: 400 
     }); 
     if ($("#dialogDelete").length > 0) { 
      $("#dialogDelete").dialog({ 
       autoOpen: false, 
       resizable: false, 
       draggable: false, 
       height:220, 
       modal: true, 
       close: function(){ 
        $('#record_id').text(''); 
       }, 
       buttons: { 
        'Delete': function() { 
         $.ajax({ 
          type: "POST", 
          data: { 
           id: $('#record_id').text() 
          }, 
          url: "index.php?controller=AdminUsers&action=delete", 
          success: function (res) { 
           $("#content").html(res); 
           $("#tabs").tabs(); 
          } 
         }); 
         $(this).dialog('close');    
        }, 
        'Cancel': function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
     } 
    }); 
})(jQuery); 

我已經做藪修改爲自舉模式取代它，所以在這一刻它看起來像這樣：

(function ($) { 
    $(function() { 
     if ($('#frmCreateUser').length > 0) { 
      $('#frmCreateUser').validate(); 
     } 
     if ($('#frmUpdateUser').length > 0) { 
      $('#frmUpdateUser').validate(); 
     } 

     $("a.icon-delete").live("click", function (e) { 
      e.preventDefault(); 
      $('#record_id').text($(this).attr('rev')); 
      $('#myModal').modal('show'); 
     }); 

     if ($("#tabs").length > 0) { 
      $("#tabs").tabs({ 
       select: function(event, ui){ 
        $("#message_box").html(""); 
        switch(ui.index){ 
         case 0: 
          $("#info_list_box").css("display", "block"); 
          $("#info_add_box").css("display", "none"); 
          break; 
         case 1: 
          $("#info_list_box").css("display", "none"); 
          $("#info_add_box").css("display", "block"); 
          break; 
        } 
       } 
      }); 
     } 
     $(".multiselect").multiselect({ 
      minWidth: 400 
     }); 
     if ($("#myModal").length > 0) { 
      $("#myModal").modal({ 
       autoOpen: false, 
       resizable: false, 
       draggable: false, 
       height:220, 
       modal: true, 
       close: function(){ 
        $('#record_id').text(''); 
       }, 
       buttons: { 
        'Delete': function() { 
         $.ajax({ 
          type: "POST", 
          data: { 
           id: $('#record_id').text() 
          }, 
          url: "index.php?controller=AdminUsers&action=delete", 
          success: function (res) { 
           $("#content").html(res); 
           $("#tabs").tabs(); 
          } 
         }); 
         $(this).modal('hide');   
        }, 
        'Cancel': function() { 
         $(this).modal('hide'); 
        } 
       } 
      }); 
     } 
    }); 
})(jQuery); 

它似乎它已經幫助了，對話框現在是一種模式，雖然我的按鈕不工作..我已確保按鈕具有按鈕的作用，但js不使用我的按鈕，如在對話框中..我很確定這個錯誤是在最後一個t的地方ime使用#myModal id ..

謝謝。

Answer 1

使用Bootstrap模態爲模態設計和功能提供了很大的靈活性。這個「缺點」是你必須自己做更多的工作。如果你看Bootstrap modal documentation，你會看到，當你正確地調用模式時，它會比jQuery對話框有一組完全不同的選項。首先，你不能將按鈕和按鈕動作作爲選項傳遞給模態。你可以做的是使用按鈕創建你需要的HTML結構，然後添加javascript來控制他們的動作。這bootply應該作爲你想要的基本框架。