title: dynamically create html modal window button
body: <p>I have created a web application and one of its functions is to list products that match a certain search.
  However now i want to be able to have a button next to each product which when pressed will open a modal box with a bigger image and more details. 
  I know how to create a modal box and have one that is successfully working. </p>
  
  <p>My question is: how would i go about creating buttons dynamically so that it shows up along side each search result? each button would have to be different.</p>
  
  <pre><code>&lt;?php //connect to DB
  $db = mysqli_connect('localhost','root','notactualpassword','bnh2012')
  or die('Error connecting to MySQL server.');
  
  ?&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    // Get the modal
      var modal = document.getElementById('myModal');
      
      // Get the button that opens the modal
      var btn = document.getElementById("myBtn");
      
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName("close")[0];
      
      // When the user clicks the button, open the modal 
      btn.onclick = function() {
          modal.style.display = "block";
      }
      
      // When the user clicks on &lt;span&gt; (x), close the modal
      span.onclick = function() {
          modal.style.display = "none";
      }
      
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The Modal (background) */
      .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }
      
      /* Modal Content */
      .modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
      }
      
      /* The Close Button */
      .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
      }
      
      .close:hover,
      .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;h2&gt;Pop-up Test&lt;/h2&gt;
      
      &lt;!-- Trigger/Open The Modal --&gt;
      &lt;button id="myBtn"&gt;Press Me&lt;/button&gt;
      
      &lt;!-- The Modal --&gt;
      &lt;div id="myModal" class="modal"&gt;
      
        &lt;!-- Modal content --&gt;
        &lt;div class="modal-content"&gt;
          &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;img src="/webERP/companies/bnh2012/part_pics/PG219M.jpg" alt="Test Belt" style="width:304px;height:228px;"&gt;
          &lt;p&gt;This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description&lt;/p&gt;
        &lt;/div&gt;
      
      &lt;/div&gt;
  
      
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>