如何使用远程内容中的按钮关闭模式？答案

【问题标题】：How to close the modal with the button in remote content?如何使用远程内容中的按钮关闭模式？
【发布时间】：2016-12-14 11:14:06
【问题描述】：

作为标题，如何使用远程内容中的按钮关闭模式？

这里是原始页面，index.html：

<a href="modal.html" data-toggle="modal" data-target="#testModal">open modal</a>
<div id="testModal" class="modal fade">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">

    </div>
  </div>
</div>

这是我要在模态中打开的页面，modal.html：

<p>Hi, I am a modal</p>
<button class="btn btn-primary">close</button>

<script type="text/javascript">
  $(function() {
    $("#closeModal").click(function() {
      // do something...(Ajax)
      $("#testModal").modal('hide');
    });
  });
</script>

我希望关闭按钮关闭 index.html 中的模式，但不使用 data-dismiss。这是 Plunker 中的完整示例：http://plnkr.co/edit/EGjtma?p=info

【问题讨论】：

阅读：stackoverflow.com/questions/16493280/close-bootstrap-modal
@ZiTAL 你的意思是使用toggle 来关闭模态框吗？我已经设置了toggle，但我仍然希望按钮能够关闭模式。
“funciton”不正确，使用“function”并在浏览器中打开控制台查看错误，对于firefox使用firebug
@ZiTAL 抱歉拼写错误，我已经更新了问题和 Plunker，但仍然无法正常工作。

标签： javascript jquery

【解决方案1】：

我检查了你的代码，我发现模态的作用是抓取 modal.html 文件的全部内容并将其放在类名为“modal-content”的 div 中

所以这很简单，你可以在 modal.html 文件中的关闭按钮中编写这段代码，这样你就可以关闭模式

<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>

我也有一些笔记给你

您添加了许多脚本，我不确定您是否需要
您的代码包含一些 Javascript 错误，因此请检查浏览器控制台以修复它们
不要在modal.html中重复包含JS/CSS，如果这些文件已经存在于主文件中，则无需再次添加。

【讨论】：

感谢您的回答和说明。但是如果我需要在关闭模态之前做些什么呢？我已经更新了我的问题。
@LynnChen 很高兴，您可以创建如下方法 | function closeModal() { // 你的逻辑然后 $('#testModal').hide(); } |并使按钮单击指向此功能
这种方式可以立即关闭modal，但是如果// do something...包含ajax功能，我想在ajax完成后关闭modal，有解决办法吗？
@LynnChen :) .. 是的，您可以调用 Ajax 并将模型隐藏（ $('#testModal').hide(); ）调用放在 ajax 的成功回调函数中打电话，看看这个帖子它可能对你有帮助stackoverflow.com/questions/12160482/…
我在 Plunker 上使用了你的方式，但仍然无法正常工作。

【解决方案2】：

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

对任何功能都不做任何事情，消除模式是内置在 Boostrap 上的

【讨论】：