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

作者: Innate Mind
发布时间: 2024-12-31 06:11:05 (1月前)
转自：

20 条回复

0#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Bootstrap版本3.3.2上测试 </p> <pre> <code> $('#myModal').on('hide.bs.modal', function() { $(this).removeData(); }); </code> </pre> </DIV>

编辑
1#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只有我的工作选择是： </p> <pre> <code> $('body').on('hidden.bs.modal', '#modalBox', function () { $(this).remove(); }); </code> </pre> <P> 我使用Bootstrap 3，我有一个叫做的函数 <code> popup('popup content') </code> 它附加了模态框html。 </p> </DIV>

编辑
2#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我添加了这样的东西，因为旧的内容会显示，直到新的内容出现，.modal-content中的.html（''）将清除内部的HTML，希望它有帮助 </p> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { $('#myModal').removeData('bs.modal'); $('#myModal').find('.modal-content').html(''); }); </code> </pre> </DIV>

编辑
3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $('body').on('hidden.bs.modal', '.modal', function () { $("#mention Id here what you showed inside modal body").empty() }); </code> </pre> <P> 你想要清空哪个html元素（div，span what）。 </p> </DIV>

编辑
4#
回复此人
陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这个对我有用： </p> <P> 语气 </p> <pre> <code> <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">×</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> </code> </pre> <P> 脚本 </p> <pre> <code> <script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () { $(".links-area").empty() }); </script> </code> </pre> <P> links-area是我放置数据并需要清除的区域 </p> </DIV>

编辑
5#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于bootstrap 3，你应该使用： </p> <pre> <code> $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); </code> </pre> </DIV>

编辑
6#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { $(this).removeData('modal'); }); </code> </pre> <P> 这个对我有用。 </p> </DIV>

编辑
7#
回复此人
荀彧. | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 添加$（this）.html（''）;清除可见数据，它工作得很好 </p> </DIV>

编辑
8#
回复此人
诸葛神侯 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Bootstrap 3.2.0中，“on”事件必须在文档上，您必须清空模态： </p> <pre> <code> $(document).on("hidden.bs.modal", function (e) { $(e.target).removeData("bs.modal").find(".modal-content").empty(); }); </code> </pre> <P> 在Bootstrap 3.1.0中，“on”事件可以在身体上： </p> <pre> <code> $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); </code> </pre> </DIV>

编辑
9#
回复此人
土豆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我写了一个简单的片段来处理模态的刷新。基本上它将点击的链接存储在模态的数据中，并检查它是否是已被点击的相同链接，删除或不删除模态数据。 </p> <pre> <code> 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'); }); }; </code> </pre> </DIV>

编辑
10#
回复此人
google你他吗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于Bootstrap 3，在modal.js中我改变了： </p> <pre> <code> $(document) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); }) </code> </pre> <P> 至 </p> <pre> <code> $(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') }) </code> </pre> <P> （为清晰起见，增加了额外间距 </p> <P> 这可以通过调用模态容器上的empty（）以及删除数据来防止任何不需要的旧模态内容闪存。 </p> </DIV>

编辑
11#
回复此人
啊这回彻底死了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这种方法对我很有用： </p> <pre> <code> $("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); }); </code> </pre> </DIV>

编辑
12#
回复此人
Fire ming | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我的项目建在Yii＆amp;使用Bootstrap-Yii插件，所以这个答案只有在你使用Yii时才有意义。 </p> <P> 上面的修复工作确实有效，但仅在第一次显示模态之后。它第一次出现空洞。我认为那是因为在我启动代码之后，Yii调用了模态的隐藏功能，从而清除了我的启动变量。 </p> <P> 我发现在启动模式的代码之前立即放置removeData调用就可以了。所以我的代码结构如下...... </p> <pre> <code> $ ("#myModal").removeData ('modal'); $ ('#myModal').modal ({remote : 'path_to_remote'}); </code> </pre> </DIV>

编辑
13#
回复此人
银角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这适用于Bootstrap 3 FYI </p> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); }); </code> </pre> </DIV>

编辑
14#
回复此人
谦逊的毛巾 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 祝你好运： </p> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { location.reload(); }); </code> </pre> </DIV>

编辑
15#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果提供了远程URL，则将通过jQuery加载一次内容的<strong> 加载 </强> 方法并注入.modal-content div。如果您正在使用data-api，则可以使用href属性指定远程源。这方面的一个例子如下所示 </p> <pre> <code> $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); </code> </pre> </DIV>

编辑
16#
回复此人
遇见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 接受的答案对我不起作用，所以我选择使用JavaScript来完成它。 </p> <pre> <code> <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")}) }) }) </code> </pre> </DIV>

编辑
17#
回复此人
SHOU宅大可爱 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为什么不使BS 3更通用？只需使用“[something] modal”作为模态DIV的ID。 </p> <pre> <code> $("div[id$='modal']").on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); } ); </code> </pre> </DIV>

编辑
18#
回复此人
求赞有赞必回 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> @merv接受的答案的扩展版本。它还会检查隐藏的模态是否从远程源加载并清除旧内容以防止它闪烁。 </p> <pre> <code> $(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(); } }); </code> </pre> <P> <a href="https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5" rel="nofollow"> https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5 </A> </p> </DIV>

编辑

登录后才能参与评论