Question

这是我的模态代码：

<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…</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">造</a>

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

这是jsfiddle。忽略加载的内容。请注意，模态标题和模态页脚内容不会显示。

Answer 1

你替换整个模态的内容，而不是模态的主体。

$(lv_target).find('.modal-body').load(lv_url);

Answer 2

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

问题在于：

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

你应该删除trigger元素中的'data-remote =“true”'。首先，它不是布尔属性。第二，文档说明你应该使用href或数据远程属性，而不是两者。

此外，您错过了点击中的结束“}”。

为什么我的远程模态不显示.modal-header或footer？

2 个答案: