javascript - 如何在 Bootstrap 3 中仅使用一个模态 div 打开具有多个按钮的多个模态窗口

Question

基本上我有这个代码

<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 -->

现在，每个实习生的页脚都有一个按钮，可以激活显示其简历的模式。我不想要的是必须为每个按钮添加 8 个模态 div，因为这太多了。有没有一种方法可以将变量从每个按钮传递给模式，并在选择特定实习生时打开特定简历。这也是启动它的模态部分。

<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>

我不愿意拥有 8 个这样的东西。任何帮助，将不胜感激。谢谢

Answer 1

这相当容易。这个想法是在每个模态触发 anchor /按钮旁边都有一个隐藏输入，单击后，将最接近的隐藏输入值(其中包含 pdf 链接或任何其他值)传递给您的模态。

因此，在每份简历中添加(我在这里使用了 anchor 标记，但也可以使用按钮完成相同的操作):

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

还有 jQuery 位:

//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>');
});

看看 demo here.