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

这很容易。我们的想法是在您的每个模态触发锚点/按钮旁边都有一个隐藏输入，一旦点击，将最近的隐藏输入值（包含pdf链接或任何其他值）传递给您的模态。

所以在每个简历中添加（我在这里使用了一个锚标签，但也可以用按钮完成）：

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

如何在Bootstrap 3中仅使用一个模态div打开多个模式窗口和多个按钮

1 个答案: