削除ボタンでモーダルウィンドウを作成する方法は？

Question

削除ボタンに確認ウィンドウを作成します。 私はここにいくつかの例を見つけましたbootstrap、しかし私には不明です。ここで

は私のコードです：

<form action="~/root/awards/DeleteAward" method="post" role="form"> 
    <div class="form-group"> 
     <input type="hidden" id="awardId" name="awardId" value="@award.Id"> 
    </div> 
    <button type="submit" class="btn btn-danger"> 
     DELETE 
     <i class="glyphicon glyphicon-remove-sign"></i> 
    </button> 
</form> 

シンプルなモーダルウィンドウを作成する方法、単に「あなたはよろしいですか？」 yes/noオプション？

Answer 1

私はあなたの参考のために、単純なアラートを作成している、私は

ユーザーがボタンをクリックし

<button id="openmodalpopup" name="openmodalpopup" data-modal-action="openconfimdialog" 
     data-id="45"> 
    </button> 

アラート

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Confirmation!</h4> 
      </div> 
      <div class="modal-body"> 
       Are You Sure want to delete ? 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> 
        No</button> 
       <button type="button" class="btn btn-primary" data-modal-action="yes"> 
        Yes</button> 
      </div> 
     </div> 
    </div> 
</div> 

...これはあなたを助けることを願ってスクリプト

 var awardid= ""; 
     $("[data-modal-action=openconfimdialog]").click(function() { 
      awardid= $(this).attr("data-id"); 
      $("#myModal").modal("show"); 
     }); 

/* <button type="button" class="btn btn-primary" data-modal-action="yes"> Yes</button> */ 
// when user click yes, already you stored the value in id, you can pass the vales in ajax and delete action 

     $("[data-modal-action=yes]").click(function() { 
      //call the delete ajax method 
      //awardid= 45 
      deleteAward(awardid) //calling delete method 
     $("#myModal").modal("hide"); 
     }); 


    function deleteAward(awardid) { 
      var postData = { 
      id: awardid 
     }; 
      $.ajax({ 
       type: "post" 
       url: "url for the action" 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       data: JSON.stringify(postData), 
       success: function (data) { 
        //do you actions 
       } 
      }); 
     }