CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
blanc0america02
blanc0america02

Reputation: 35

How to open multiple modal windows with multiple buttons using only one modal div in Bootstrap 3

Basically I have this code

<div class="col-lg-3 col-md-3 features">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h1 class="panel-title"><span class="glyphicon glyphicon-user"></span> Intern</h1>
                    </div>
                    <div class="panel-body">
                        <img class="img-circle" src="js/holder.js/170x170" alt="Tony" style="margin-top: 20px; width:170px; height:170px">
                        <h2>Alvin</h2>
                        <p>Biodiesel fixie Etsy distillery ethnic. Occupy Cosby sweater Pitchfork, chia YOLO art party keytar direct trade seitan before 
                        they sold out squid stumptown salvia deep v.</p>
                    </div>
                    <div class="panel-footer panel-primary"><h1 class="panel-title"><span class="glyphicon glyphicon-file"></span> Resume</h1></div>
                </div>
            </div><!-- /.col-lg-4 -->

            <div class="col-lg-3 col-md-3 features">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h1 class="panel-title"><span class="glyphicon glyphicon-user"></span> Intern</h1>
                    </div>
                    <div class="panel-body">
                        <img class="img-circle" src="js/holder.js/170x170" alt="Tony" style="margin-top: 20px; width:170px; height:170px">
                        <h2>Marlon</h2>
                        <p>Biodiesel fixie Etsy distillery ethnic. Occupy Cosby sweater Pitchfork, chia YOLO art party keytar direct trade seitan before 
                        they sold out squid stumptown salvia deep v.</p>
                    </div>
                    <div class="panel-footer panel-primary"><h1 class="panel-title"><span class="glyphicon glyphicon-file"></span> Resume</h1></div>
                </div>
            </div><!-- /.col-lg-4 -->

Now every intern has a button at the footer that will activate a modal showing their resume. What I dont want is to have to add 8 modal divs for each button cause that is just way to much. Is there a way I can pass a variable to a modal from each button and have the specific resume open upon specific intern chosen. Here is the modal part to initiate it also. 

<div class="container"> 
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Modal Launch Button
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <object type="application/pdf" width="100%" height="400px" data="CV2014.pdf"></object>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>

I would hate to have to have 8 of those things. Any help would be appreciated. Thanks

Upvotes: 1

Views: 4559

Answers (1)

AyB
AyB

Reputation: 11665

It's fairly easy. The idea is to have a hidden input next to each of your modal triggering anchor/button, once clicked, pass the closest hidden input value (which contains the pdf link or any other value) to your modal.

So in every resume, add (I have used an anchor tag here but the same could be done with a button):

<input type="hidden" value="url" class="pdf-link">                    
<a data-toggle="modal" data-target="#myModal">Open</a>

And the jQuery bit:

//on click of the anchor tag
$('a[data-toggle="modal"]').on('click', function (e) {

    //get the pdf link (from the previous element which is a hidden input)
    pdf = $(this).prev('.pdf-link').val();

    //load the pdf in a iframe window placed within the modal
    $('.modal-body').html('<iframe src="'+pdf+'"></iframe>');
});

Have a look at the demo here.

Upvotes: 1

Related Questions