title: Bootstrap modal popup not working properly in aspx
body: <p>i have this button B1 (say)
  when i click on this B1 a modal popup appears with buttons / links</p>
  
  <p>when i click the button / link a new popup <strong>should</strong> appear but i dont get the Modal window but i do get the values in <code>firebug</code></p>
  
  <p>Here is the code to the Button B1</p>
  
  <pre><code>&lt;div class="thumbnail" &gt;&lt;img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>which then calls this modal popup which contains the content from the div <code>divB1Market</code></p>
  
  <pre><code>&lt;div class = "modal fade" id="B1Market" 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" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h3&gt;Heading&lt;/h3&gt;
          &lt;/div&gt;  
          &lt;div class="modal-body"&gt;
          &lt;div id='divB1Market' runat="server"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Done&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The code below is the link / content inside the <code>divB1Market</code></p>
  
  <pre><code>&lt;a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'&gt;Link here&lt;/a&gt;
  </code></pre>
  
  <p>which inturn calls the ajax call</p>
  
  <pre><code>PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
  $.ajax({
      type: "GET",
      url: PlayerMP.URL,
      data: "rt=4&amp;type=" + type + "&amp;UserID=" + UserID + "&amp;SessionID=" + SessionID + "&amp;SessionNo=" + SessionNo,
      success: function (FinancialSplitsJS) {
          if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
  
              $("#divFunctionalDetails").html(FunctionalSplitsJS);
              switch (type) {
                  case 1:
                      $("#divFunctionalsSplit"); 
                      break;
                              }                
  
                      $("#divFunctionalsSplit").show();        /* calling the div with this id in the aspx page */
          }
          else
              window.location.href = "../Login.aspx?SessionExpired=1";
      }
  });}
  </code></pre>
  
  <p>This is the modal-popup content in the aspx page </p>
  
  <pre><code>&lt;div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;  &lt;%--this is the one not showing up--%&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                          &lt;h3&gt;Content&lt;/h3&gt;      
                    &lt;/div&gt; 
                    &lt;div class="modal-body"&gt;
                      &lt;div id="divFunctionalDetails" style="color:Black;"&gt;&lt;/div&gt;
                     &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is what i get when i openup firebug and hover around with my cursor </p>
  
  <p><img src="https://i.stack.imgur.com/QPTaV.jpg" alt="enter image description here"></p>
  
  <p>But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.</p>
  
  <p>This is the order of my importing the packages (posted this because i got this error while using )</p>
  
  <pre><code>$("#divFunctionalsSplit").modal().show();
  </code></pre>
  
  <p><code>Uncaught TypeError: Object #&lt;Object&gt; has no method 'modal'</code></p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- Start of BootStrap --&gt;
  &lt;link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="../Scripts/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>