Question

我正在使用bootstrap 3.我点击了一个生成两个不同链接的链接。他们每个人都在其点击和放大器上调用bootstrap模态。他们的内容来自两个不同的文件＆＃39; content.html＆＃39; ＆安培; ＆＃39; content2.html＆＃39 ;.两者都有不同的内容。当我点击第一个链接时，它显示正确的内容，而当我点击第二个链接时，它再次显示来自第一个远程网址的内容。

现场演示可在http://myraipur.com/so/test.html

找到

这是我的代码。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>


<center><a href="#" id="generate">Launch demo modal</a></center>

<div id="load" ></div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
          </div>
        </div>
     </div>

<script>
$(document).ready(function(){
  $('#generate').on('click',function(){
    $('#load').html('<a href="content.html" data-toggle="modal" data-target="#myModal">Click Me</a> <a href="content2.html" data-toggle="modal" data-target="#myModal">Click2 Me</a>');
});

  $("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    console.log(link.attr("href"));
    $(this).find(".md-body").load(link.attr("href"));
  });
});
</script>

动态生成链接上的Bootstrap Modal

0 个答案: