Come aprire modale dalla chiamata di funzione Jquery

Question

ho questo modale da Bootstrap Quando aggiungo tasto Per chiamare aperto con successo, ma quello che mi ha realmente bisogno è di aprire questo modale dalla funzione di chiamata automatica mio esperimento è:

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

MY JavaScript è

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

poi:

 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'); 
    } 

e qui il mio modale

<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> 

Avviso: quando aggiungo $("#EnSureModal").modal('show'); in document.ready si appeasrs al caricamento della pagina e appare nuovamente su chiamata di funzione, come posso farlo appare solo nella chiamata di funzione

Answer 1

Ho letto il tuo codice e ho scoperto che non hai utilizzato correttamente il bootstrap e anche lo script che hai scritto non è corretto. Controllalo. Questo potrebbe aiutarti.

Script:

$(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> 

Il fiddle