Question

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

这是原始页面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

Answer 1

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

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

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

我也有几个笔记给你

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

Answer 2

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

对任何函数都不做任何事情，在Boostrap

上解雇模态是内置的

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

2 个答案: