Twitter 引导远程模式每次都显示相同的内容

问题有两个方面。

首先，一旦一个 Modal 对象被实例化，它就会持久地附加到 data-target 指定的元素上，随后的调用表明 modal 只会在其上调用 toggle()，但不会更新值在 options 中。因此，即使您的不同链接上的 href 属性不同，当切换模式时，remote 的值也不会更新。对于大多数选项，可以通过直接编辑对象来解决这个问题。例如：

$('#myModal').data('bs.modal').options.remote = "http://website.example/item/7";

但是，这在这种情况下不起作用，因为...

第二，Modal插件被设计为在Modal对象的构造函数中加载远程资源，这很遗憾意味着即使对options.remote进行了更改， 它永远不会被重新加载。

一个简单的补救措施是在后续切换之前销毁 Modal 对象。一种选择是在它完成隐藏后将其销毁：

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

注意：根据需要调整选择器。这是最一般的。

普朗克

或者你可以尝试想出一个更复杂的方案来做一些事情，比如检查启动模式的链接是否与前一个不同。如果是，则销毁；如果不是，则无需重新加载。

---

对于引导程序 3，您应该使用：

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

---

对于 Bootstrap 3.1，您需要删除数据并清空 modal-content 而不是整个对话框 (3.0)，以避免在等待远程内容加载时出现闪烁。

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

如果您使用的是非远程模式，那么上面的代码当然会在关闭后删除它们的内容（坏的）。您可能需要向这些模式添加一些内容（例如 .local-modal 类），以免它们受到影响。然后将上面的代码修改为：

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

---

谢谢梅尔夫。我开始对 boostrap.js 进行修补，但您的回答是一个快速而干净的解决方法。这是我最终在我的代码中使用的内容。

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

---

接受的答案对我不起作用，所以我用 JavaScript 去做。

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

---

这适用于 Bootstrap 3 仅供参考

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

---

我的项目是在 Yii 中构建的并且使用 Bootstrap-Yii 插件，所以这个答案只有在你使用 Yii 时才有意义。

上述修复确实有效，但仅在第一次显示模态之后。第一次出来是空的。我认为这是因为在我启动代码之后 Yii 调用了模式的隐藏函数，从而清除了我的启动变量。

我发现将 removeData 调用放在启动模态的代码之前就可以了。所以我的代码结构是这样的......

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

---

在 Bootstrap 3.2.0 中，“on”事件必须在文档上，并且您必须清空模式：

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

在 Bootstrap 3.1.0 中，“on”事件可以在 body 上：

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

---

为什么不使用 BS 3 使其更通用？只需使用“[something]modal”作为模态 DIV 的 ID。

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

---

对我来说唯一的工作选择是：

$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

我使用 Bootstrap 3，并且我有一个名为 popup('popup content') 的函数，它附加了模态框 html。

---

添加 $(this).html('');也可以清除可见数据，并且效果很好

---

如果提供了远程 URL，内容将通过 jQuery 的 load 方法加载一次并注入到 .modal-content div 中。如果您使用的是 data-api，您也可以使用 href 属性来指定远程源。这方面的一个例子如下所示

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

---

我添加了类似的内容，因为旧内容会一直显示，直到新内容出现，.modal-content 中的 .html('') 会清除里面的 HTML，希望对您有所帮助

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

---

我写了一个简单的片段来处理模态的刷新。基本上它将被点击的链接存储在模态数据中，并检查它是否与被点击的链接相同，删除或不是模态数据。

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

---

对于 Bootstrap 3，在 modal.js 我改变了：

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

至

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

（为清楚起见添加了额外的间距）

这可以通过在模态容器上调用 empty() 以及删除数据来防止任何不需要的旧模态内容闪现。

---

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

这个对我有用。

---

这种另一种方法对我很有效：

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

---

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

你想清空哪个 html 元素（div，span 不管）。

---

这个对我有用：

模态的

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

脚本

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

链接区域是我放置数据并需要清除的区域

---

@merv 接受的答案的扩展版本。它还检查是否从远程源加载了被隐藏的模态并清除旧内容以防止其闪烁。

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

---

在 Bootstrap 版本 3.3.2 上测试

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

---

祝你好运：

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});

---