dynamically create html modal window button

Question

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.

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.

<?php //connect to DB
$db = mysqli_connect('localhost','root','notactualpassword','bnh2012')
or die('Error connecting to MySQL server.');

?>

    // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> 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 <span> (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";
        }
    }

/* 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;
    }

<html>
    <head>

    </head>
    <body>
    
    <h2>Pop-up Test</h2>
    
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Press Me</button>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <img src="/webERP/companies/bnh2012/part_pics/PG219M.jpg" alt="Test Belt" style="width:304px;height:228px;">
        <p>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</p>
      </div>
    
    </div>

    
    </body>
    </html>

you mean you are trying to create the dynamic button to show the model@aderry — lalithkumar, Jul 03 '17 at 09:07
@lalithkumar thats right. and each button will need to open up the correct modal for each product. — aderry, Jul 03 '17 at 09:13

lalithkumar · Answer 1 · 2017-07-04T08:50:24.743

That you can achieve by the dynamic class name.The class name can be same as all the model and buttons.

 $(function(){
 // Get the modal
    var modal = $('div.myModal');
    
    // Get the button that opens the modal
    var btn = $("button.myBtn");
    
    // Get the <span> element that closes the modal
    var span = $(".close");
    
    // When the user clicks the button, open the modal 
    btn.on('click',function() {
        modal.show();
    });
    
    // When the user clicks on <span> (x), close the modal
    span.on('click',function() {
        modal.hide();
    });
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    });

/* 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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
    <head>

    </head>
    <body>
    
    <h2>Pop-up Test</h2>
    
    <!-- Trigger/Open The Modal -->
    <button class="myBtn">Press Me</button>
    
    <!-- The Modal -->
    <div class="modal myModal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        
        <p>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</p>
      </div>
    
    </div>

    
    </body>
    </html>

im trying it now. I will need to enclose it in php tags yes? — aderry, Jul 03 '17 at 09:52
i can't find any php content in your code.if you have then you can add it within `` — lalithkumar, Jul 03 '17 at 09:54
no error. just that the button doesnt open a modal box anymore.it doesnt do anything — aderry, Jul 03 '17 at 14:30
It is working on my fiddle.. you would have done some mistake — lalithkumar, Jul 03 '17 at 14:42
you are correct. ok now that i have this one button how do i generate them depending on the outcome of the search ? say i have a loop that lists all the products. do i put something in this loop? — aderry, Jul 03 '17 at 14:45

score 0 · Answer 2 · answered Jul 03 '17 at 10:26

Bootstrap allows you to create dynamic button. For a single model for further detail see this link.

http://getbootstrap.com/javascript/#modals

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-body #image').attr('src',recipient)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=first image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 1</p>
        <p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=first image">Model</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=second image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 2</p>
        <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=second image">Model</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4">
    <div class="thumbnail">
      <img src="http:placehold.it/250x250?text=thired image" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Test 3</p>
        <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="http://placehold.it/250x250?text=thired image">Model</button></p>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <img src="" id="image">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

thank you very much. I am trying a different implementation since this did not work for my application. — aderry, Jul 04 '17 at 09:59

dynamically create html modal window button

2 Answers2