在模态窗口中动态设置HREF值(bootstrap / jquery)

时间:2016-07-21 20:24:02

标签: jquery twitter-bootstrap

我正在试图弄清楚如何根据用户点击激活模态的各种链接在模态中添加HREF的值。

例如,我有3个链接打开完全相同的模态窗口:

<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-1</a>
<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-2</a>
<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-3</a>

模态窗口中包含的信息对于所有3都是相同的,但模式窗口中的标签将根据用户点击打开模态的链接重定向到其他位置。

这是模态标记:

  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">X</button>
      <h1 class="modal-title">My Modal Window</h1>
    </div>
    <div class="modal-body">
      <p>My copy goes here</p>
    </div>
    <div class="modal-footer"> 
        <a id="closemodal" href="DEPENDS ON LINKED CLICKED TO OPEN MODAL" class="btn btn-primary" target="_blank">GO</a>
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
  </div>

1 个答案:

答案 0 :(得分:3)

您可以使用jQuery attr(key,value)来更改超链接的href。

<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal" data-link="google.com">Modal-1</a>

$('a').click(function() 
{
    $('#closemodal').attr('href', $(this).data('link'));
});

https://jsfiddle.net/kaofgend/3/