0

这是我的模态代码：

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

这是与模态相关的javascript：

$('#myModal').on('hidden', function () {
    $(this).removeData('modal');
});

$("a[data-toggle=modal]").click(function (e) {
    lv_target = $(this).attr('data-target')
    lv_url = $(this).attr('href')
    $(lv_target).load(lv_url)});

这是我的链接代码：<a href="http://localhost:3000/hints/found_sentences?word=创造" class="old_hint" data-remote="true" data-target="#myModal" data-toggle="modal">造&lt;/a>

当我单击链接时，它会显示所有div 被替换，而不仅仅是"modal-body"div。也就是说，Modal header不会出现在远程内容的上方。

这是一个jsfiddle。忽略加载的内容。请注意，modal-header 和 modal-footer 内容没有显示。

4

2 回答 2

0

您替换了整个模态的内容，而不是模态的正文。

$(lv_target).find('.modal-body').load(lv_url);
于 2013-01-20T18:08:58.970 回答
0

你在这里：http: //jsfiddle.net/kulldox/W3TLJ/3/

问题出在这里：

<a href="/favicon.png" class="old_hint" data-target="#myModal" data-toggle="modal">你&lt;/a>

您应该删除触发器元素中的 'data-remote="true"'。首先，它不是布尔属性。其次，文档说明您应该使用 href 或 data-remote 属性，而不是同时使用两者。

您也错过了点击的结束“}”。

于 2013-01-21T10:15:54.857 回答