如何從功能打開模態，從引導 調用Jquery的

Question

我有這樣的模態當我添加 按鈕來調用它，它打開成功， 但我真正需要的是從函數調用自動 我的實驗是打開這個模式：

 <button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline; 
padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button> 

我的JavaScript

function RenewCollectorDatePeriod() { 
     // AreYOuSureRenew();   
      var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val(); 
      if (EmpID == -1) { 
       alert("please select one ") 
      } 
      else { 
       alert(EmpID); 
       GetCollectorInfo(EmpID);  
      }   
     } 

則：

 function GetCollectorInfo(EmpID) { 
     //  AreYOuSureRenew(); 
      $.ajax({ 
       type: "POST", 
       url: "UnloadingCalendar.aspx/GetCollectorInfo", 
       data: JSON.stringify({ EmpID: EmpID }), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (result) { 
        alert(result.d); 
        AreYOuSureRenew(); 
        }, 
       error: function (msg) { 
        alert(msg.d); 
       }, 
       complete: function() { 

       } 
      }) 
     } 


    function AreYOuSureRenew() { 
     alert("opened"); 
     $('#EnsureModal').modal('show'); 
    } 

，在這裏我的模式

<div class=" modal fade" id="EnSureModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Do ypu need change </h4> 
       </div> 
       <div class="modal-body"> 
        <p>Are u sure from </p> 
        <label id="FromDate"></label> 
        <p>To</p> 
        <label id="ToDate"></label> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">no</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">yes</button> 
       </div> 
      </div> 
     </div> 
    </div> 

注意：當我添加$("#EnSureModal").modal('show');中的document.ready它appeasrs在頁面加載和函數調用再次出現，我怎樣才能使它只出現在函數調用

Answer 1

我讀了你的代碼，發現你沒有正確使用bootstrap，而且你寫的腳本也不正確。看一下這個。這可能會幫助你。

腳本：

$(document).ready(function(){ 
    $("#fireme").click(function(){ 
     $("#EnSureModal").modal(); 
    }); 
}); 

HTML：

<button id="fireme" class="btn btn-default">Fire me up!</button> 
<div class="modal fade" id="EnSureModal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Do ypu need change </h4> 
      </div> 
      <div class="modal-body"> 
       <p>Are u sure from </p> 
       <label id="FromDate"></label> 
       <p>To</p> 
       <label id="ToDate"></label> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">no</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">yes</button> 
      </div> 
     </div> 
    </div> 
</div> 

的fiddle