jQuery 대신 부트 스트랩 모달 대화 상자

Question

확인 대화 상자에 jQuery 대화 상자를 사용하는 사용자 정의 PHP 스크립트가 있습니다.

(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); 

그것을 :이 순간에 그것은 다음과 같습니다, 그래서 내가 부트 스트랩 모달로 대체하기위한 Serval의 수정을했을

(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); 

:

대화 상자를 초기화 해줍니다 JS

은 다음과 같습니다 그것이 도움이 보인다, 그리고 대화 상자가 이제 원하는대로 모달입니다, 내 버튼이 작동하지 않습니다 .. 버튼이 버튼의 역할을 가지고 있는지 확인했지만 js는 대화 상자에서와 같이 내 버튼을 사용하지 않습니다. .. 메신저 꽤 오류가 마지막 어딘가에 어딘가에 있는지 예 #myModal ID가 사용됩니다 ..

감사합니다.

Answer 1

부트 스트랩 모달을 사용하면 모달 디자인 및 기능에 많은 유연성을 제공합니다. 이것에 대한 "단점"은 좀 더 많은 일을 스스로해야한다는 것입니다. 부트 스트랩 modal documentation을 보면 모달을 올바르게 호출하는 동안 jQuery 대화 상자와 완전히 다른 옵션 집합이 필요하다는 것을 알 수 있습니다. 맨 먼저, 버튼과 버튼 액션을 모달의 옵션으로 전달할 수 없습니다. 대신 필요한 버튼을 사용하여 HTML로 필요한 구조를 만든 다음 javascript를 추가하여 액션을 제어 할 수 있습니다. 이 bootply은 사용자가 원하는 기본 프레임 워크로 작동해야합니다.