jQuery 实现 bootstrap 模态框 删除确认

思路：

点击删除按钮，通过jquery将删除操作的URL赋值到页面URL元素，并弹出会话框

用户点击确认，通过jquery获取URL，并发送删除请求至后台。

一、删除button

<a class="btn btn-primary" onClick="delcfm('${ctxPath}/manager/project/delete?id=${vo.id?default("")}')">删除</a>
  
  
 
 

二、js定义

   
   
  
  
 
   
 
    
 
     
 
    
 
    
 
     
 
      function delcfm(url) { 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

       $( 
      '#url').val(url); 
      //给会话中的隐藏属性URL赋值 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

       $( 
      '#delcfmModel').modal(); 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

       } 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      function urlSubmit(){ 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

          
      var url=$.trim($( 
      "#url").val()); 
      //获取会话中的隐藏属性URL 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

          
      window.location.href=url;   
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     

       } 
     
 
    
 
  
  
  
 
 

一、定义dialog会话框

   
   
  
  
 
   
 
    
 
     
 
    
 
    
 
     
 
      <!-- 信息删除确认 --> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal fade" id="delcfmModel"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal-dialog"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal-content message_align"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal-header"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">× 
      </span> 
      </button> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <h4 class="modal-title">提示信息 
      </h4> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal-body"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <p>您确认要删除吗？ 
      </p> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <div class="modal-footer"> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <input type="hidden" id="url"/> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <button type="button" class="btn btn-default" data-dismiss="modal">取消 
      </button> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      <a onclick="urlSubmit()" class="btn btn-success" data-dismiss="modal">确定 
      </a> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
      <!-- /.modal-content --> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
      <!-- /.modal-dialog --> 
     
 
    
 
   
 
    
 
     
 
    
 
    
 
     
 
      </div> 
      <!-- /.modal -->