title: Bootstrap modal in a php page activated by javascript
body: <p>I have a php page. I try to open a modal with the buttons in a list (created by loop). In this list there are many items with different parameters and several buttons for each section of the list. With the button "Fahrzeuganwendungen", My following code opens a modal covering entire page, it is transparent, no header / footer / ... sections. It contains the data only:</p>
  
  <pre><code>&lt;?php
  
  ...
  
  ?&gt;
  
  &lt;div class='results'&gt;
      &lt;input type="hidden" class="test1" name="metin2" value="&lt;?php echo $parcano;?&gt;" /&gt;
      &lt;input type="hidden" class="brand" name="brandname" value="&lt;?php echo $marka;?&gt;" /&gt;
      &lt;input type="hidden" class="artnr" name="skunr" value="&lt;?php echo $parcano;?&gt;" /&gt;
  
      &lt;button class="btn_mrt"&gt;&lt;i class="fa fa-search" style="color:lightseagreen;"&gt;&lt;/i&gt; weitere suche für &lt;?php echo $parcano;?&gt;&lt;/button&gt;
      &lt;button class="btn_additionalnumbers"&gt;&lt;i class="far fa-list-alt" style="color:lightseagreen;"&gt;&lt;/i&gt; zusätzliche Nummern&lt;/button&gt;
      &lt;button class="btn_vehicles"&gt;&lt;i class="fas fa-car" style="color:lightseagreen;"&gt;&lt;/i&gt; Fahrzeuganwendungen&lt;/button&gt;
      &lt;div class="additionalnumbers" name="additionalnumbers" style="background-color: #aaa; border: 0px solid green; padding: 2px; margin: 10px;"&gt;&lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;h2&gt;Activate Modal with JavaScript&lt;/h2&gt;
        &lt;!-- Trigger the modal with a button:   &lt;button type="button" class="btn_vehicles" id="myBtn"&gt;Open Modal&lt;/button&gt; --&gt;
  
        &lt;!-- Modal --&gt;
        &lt;div class="modal fade" id="myModal" 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" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;&lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  &lt;?php
  
  ...
  
  ?&gt;
  &lt;script&gt;
  
      $(function() { // when page loads
        $(".btn_mrt").on("click", function() { // click any class="single_add_to_cart_button button alt"
          var metin2 = $(this).closest('.results').find('input[name="metin2"]').val();
          $('input[name=metin]').val(metin2);
                $.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi2: metin2}, function (gelen_cevap) {
                       $('.cevap').html(gelen_cevap);
                });
        });
      });
  
  
      $(function() { // when page loads
        $(".btn_additionalnumbers").on("click", function() { // click any class="single_add_to_cart_button button alt"
          var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
          var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
          var numberdiv = "additionalnumbers" + brandname + skunr;
          var $nd = $(this).closest('.results').find('div.additionalnumbers');
              $.post('/wp-content/plugins/ajax-test/GetAdditionalNumbers.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
              $nd.html(gelen_cevap2);
                });
        });
      });
  
  
      //$(document).ready(function(){
      $(function() { // when page loads
          $(".btn_vehicles").on("click", function() {
          var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
          var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
          $.post('/wp-content/plugins/ajax-test/GetArticleVehicles.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
          $("#myModal").modal().html(gelen_cevap2);
                });
          });
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have the following code in the <code>&lt;head&gt;...&lt;/head&gt;</code> of course:</p>
  
  <pre><code>  &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>What is wrong here? I would appeciate for your kind help.</p>
  
  <p>Many thanks,</p>
  
  <p>Murat</p>