javascript - 如何在模态中打开模态内部的链接

Question

我有呈现降价的模态：

<div class="markdown">

<div id="myModal" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
   </div>
   <div class="modal-body">
        Some content in here

     Some links here
     <p>Link1</p>
     <p>Link2</p>
     <p>Link3</p>
   </div>
     <div class="modal-footer">
     </div>

   </div>
</div>

现在，我的问题是，当我单击任何链接时：如果使用 href ，它会刷新浏览器。

我想打开模式内的链接，我该如何实现？

Answer 1

使用此命令而不是data-dismiss="modal"在链接中

onclick="$('#squarespaceModal').modal('hide')"

Answer 2

一种方法是使用 jQuery ajax 方法，例如.load()从链接获取内容并将其加载到.modal-bodyor .modal-content..

$('.lnk').click(function(){
  var lnk = $(this).data("src");
  $('.modal-body').text('wait..');
  $('.modal-body').load(lnk,function(){

  });
})

你会改变这个链接...

<div class="modal-body">
      <a href="#" data-src="/url" class="lnk">Link1</a>
      <a href="#" data-src="/url1" class="lnk">Link1</a>
      <a href="#" data-src="/url2" class="lnk">Link1</a>
</div>

演示：http ://bootply.com/87874

另一种方法：

使用iframe和jQuery动态改变框架的src：http: //bootply.com/61676