title: Bootstrap Modal Popup not working on PHP Page | Console Shows No Error
body: <p>All other JS functions work properly except the Modal Popup.
  The Modal is not working even on windows load.</p>
  
  <p>If I create a new page with the scripts, the modal popup function and no code within the body. The Modal works, so I think the correction is in the code within the <code>&lt;body&gt;</code> tag</p>
  
  <p>The console shows no error.</p>
  
  <p><strong>My Code</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;Ready&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;  
             &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;  
  
  
             &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
  
  &lt;script src="https://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
       &lt;link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"&gt;
  
  &lt;link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'&gt;
  
     &lt;script type="text/javascript"&gt;
  function getPackageforCourier(val) {
      $.ajax({
      type: "POST",
      url: "latest_rts_pkr.php",
      data:'courier_name='+val,
      success: function(data){
          $("#latest_rts").html(data);
      }
      });
  }
  
      function markRTS()
      {
          document.getElementById('readytoship').style.display = 'none';
          document.getElementById('awb').style.display = 'none';
          $.ajax({
          type: "POST",
          url: "pickrr_rts.php",
          data:'airwaybill='+$("#awb").val(),
          success: function(data){
                  $("#readytoship").html(data);
                  document.getElementById('readytoship').style.display = 'block';
                  document.getElementById('awb').style.display = 'block';
                  setTimeout(function() {
              $("button").removeAttr("disabled");   
              $("input").removeAttr("disabled");
              document.getElementById('awb').value = "";
          document.getElementById("awb").focus();
          }, 50); 
  
  
  
          }
          });
      }
  
  $(window).on('load',function(){
          $("#pro_popup").click();
      });
  
  
     // DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND
  
      $(function() {
      $("button").click(function() {
          $("button").attr("disabled", "disabled");
          $("input").attr("disabled", "disabled");
         // document.getElementById('resendbutton').style.display = 'none';
  
      });
  });
  
  
  function getSKUMapping(val)
      {
          var sku_id = $("#check_sku").value;
          if(sku_id!='')
          {
          $.ajax({
          type: "POST",
          url: "check_sku_mapping.php",
          data:'skuID='+val,
          success: function(data){
              if(data!=''){
                  $("#mapping_result").html(data);
                  document.getElementById('mapping_result').style.display ='block';
                  $("#check_sku").value="";
              }
          }
          });
          }
          else
          {
              document.getElementById('mapping_result').style.display ='none';
          }
      } 
  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2&gt;Ready to Ship&lt;h3&gt;
       &lt;div id="readytoship" class="animated tada bounceInRight" style=
      "padding:auto 1%;box-shadow:0px -1px 1px rgba(0,0,0,0.5);cursor:pointer; background-color:rgba(255,255,255,0.1); border-radius:6px; display:none;margin:2% auto;width:80%;"&gt;
      &lt;/div&gt;
  
  &lt;div id="rts_form"&gt;
  &lt;form id="rts" method="POST" action=""&gt;
  &lt;input class="input" type="text" maxlength="20" name="awb" placeholder="Scan Airway Bill Barcode" id="awb" autofocus autocomplete="off"&gt;
  &lt;button type="submit" id="submit" onclick="markRTS();"&gt;Mark Ready to Ship&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;div id="latest"&gt;
  &lt;?php
  $con = mysqli_connect("localhost","admin","xxx1xxx!","admin_db");//database connection
  $result = mysqli_query($con, "SELECT rts.courier, rts.status FROM `oc_shipping_pickrr` AS rts WHERE rts.status='0' GROUP BY rts.courier");
  echo '
  &lt;select class="input" name="courier_name" id="courier_name"  onChange="getPackageforCourier(this.value);" required="required"&gt;
  &lt;option value=""&gt;Select Courier&lt;/option&gt;';
  while($row = mysqli_fetch_array($result)) {
      echo '&lt;option value="'.$row['courier'].'"&gt;'.$row['courier'].'&lt;/option&gt;';
  }
  echo '&lt;/select&gt;&lt;/label&gt;';
  mysqli_free_result($result);
  
  ?&gt;
  &lt;/div&gt;
  &lt;div id="latest_rts"&gt;
  
  &lt;/div&gt;
  &lt;div id="mapping"&gt;
  &lt;form id="sku_mapping_check" method="" type="POST"&gt;
  &lt;input class="input-sku" type="text" name="check_sku" id="check_sku"  required onkeyup="getSKUMapping(this.value);" placeholder="Scan SKU Barcode"&gt;
  
  &lt;/form&gt;
  &lt;p style="font-weight:800;" id="mapping_result"&gt;
  
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt; 
  
  
  &lt;!-- Trigger the modal with a button --&gt;
  &lt;button type="button" class="btn btn-info btn-lg" id="pro_popup" data-toggle="modal" data-target="#myModal" style="display:none;top:0;left:0;"&gt;Open Modal&lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" onclick="ScrollToTop();" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" style="font-weight:600; text-align:center;"&gt;Package Details&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
        &lt;div id="new_pop_data"&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" onclick="ScrollToTop();" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried everything, but nothing works.
  I removed the php cache code also, tried in Incognito also.</p>
  
  <p>I checked with the <a href="http://esprima.org/demo/validate.html" rel="nofollow noreferrer">Javascript Syntax Validator</a> also, but it shows the code is fine.</p>