Bootstrap - 模态 - 访问父对象的值答案

【问题标题】：Bootstrap - Modal - Access value of parent objectBootstrap - 模态 - 访问父对象的值
【发布时间】：2014-01-27 12:54:52
【问题描述】：

我有一类链接，单击时会启动一个模式窗口。在模态窗口中，如何访问产生模态的对象的 href？我的目标是在模态窗口中使用一个按钮，单击该按钮将打开一个窗口，指向调用者的 href。

我不需要代码来显示此类链接的模式窗口，只需要如何访问父对象的值即可。

谢谢

根据要求提供示例：

<li><a href="http://foo" rel="ExtLink">blah</a></li>
<li><a href="http://bar" rel="ExtLink">Test</a></li>

模态：

 <div class="modal fade" id="ModalTest" tabindex="-1" role="dialog" aria-labelledby="ModalTestLabel" aria-hidden="true">

          <div class="modal-dialog">
                <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="ModalTestLabel">External URL warning</h4>
                  </div>
                  <div class="modal-body">
                        External URL warning here.
                  </div>
                  <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
                        <button type="button" class="btn btn-primary">I understand, visit link</button>
                  </div>
                </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

从 JS 打开：

$("a[rel='ExtLink']").click(function(e){
    $('ModalTest').show();

});

因此，如果我单击其中任何一个，就会打开一个模式窗口。在模态窗口中，我想要一个按钮，按下该按钮会启动调用者的 href。谢谢

【问题讨论】：

您在这些链接上有特定的 ID，您能提供一个小提琴吗？
@MehmetSeçkin 示例已按要求添加。谢谢
一种方法 - 您可以在您的页面上有一个隐藏的项目，该项目存储用于触发模式的链接的 url。每当您调用模态框时，只需设置此项目。给它一个唯一的 ID，以便您可以使用 jQuery 轻松检索（并设置它）值。
您能为模态本身提供 HTML 吗？
如何打开对话框？有一些Javascript代码吗？您是否从多个链接打开对话框？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

试试这个，

$(document).on("click", "ul li a", function (e) {
     e.preventDefault();
     e.stopPropagation();
     var link = $(this).attr('href');
     $("#myModal a").attr('href',link);
     $(".moadl").modal("show");
});

html

<ul>
<li><a href="http://foo" rel="ExtLink">blah</a></li>
<li><a href="http://bar" rel="ExtLink">Test</a></li>
</ul>

<div class="modal hide" id="myModal">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <a href="">go to link</a>
    </div>
</div>

JSFIDDLE

【讨论】：