title: How to Open Modal from Function Call Jquery
body: <p>I have this Modal from Bootstrap 
  When I add 
  button To call it it open successfully,
  but what I really need is to open this modal from function calling automatically
  my Experiment is:</p>
  
  <pre><code>     &lt;button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
   padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();"&gt;renew&lt;/button&gt;
  </code></pre>
  
  <p>MY JavaScript is </p>
  
  <pre><code> function RenewCollectorDatePeriod() {
           //   AreYOuSureRenew();        
              var EmpID = $("#&lt;%=ddlFilterCollector.ClientID%&gt;").val();
              if (EmpID == -1) {
                  alert("please select one ")
              }
              else {
                 alert(EmpID);
                GetCollectorInfo(EmpID);       
              }        
          }
  </code></pre>
  
  <p>then:</p>
  
  <pre><code>        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');
      }
  </code></pre>
  
  <p>and here my modal </p>
  
  <pre><code>    &lt;div class=" modal fade" id="EnSureModal" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Do ypu need change &lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;Are u sure from &lt;/p&gt;
                      &lt;label id="FromDate"&gt;&lt;/label&gt;
                      &lt;p&gt;To&lt;/p&gt;
                      &lt;label id="ToDate"&gt;&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;no&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;yes&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Notice: when I add <code>$("#EnSureModal").modal('show');</code> in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call </p>