从其他HTML文件打开模态窗口（bootstrap）

Question

我正在使用bootstrap构建一个网站。但是我遇到了一些困难。我已经根据提供的示例创建了一个模态框（请参见下面）。正如您所看到的，这是直接从他们的网站上获取的一个模态框。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Nieuwe Taak toevoegen</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我使用按钮打开此对话框。

<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >

但我想把我的模态框保存在单独的aspx/html文件中。如果它们保存在不同的html/aspx文件中，我该如何打开这些模态框？

示例： 如果按钮位于index.Html内，但模态框位于newTaskModal.html内，我应该如何打开模态框？（如果两者都在index.html内，那么就没有问题）

注意： 我不能使用HTML5（公司标准）。

- User999999

Answer 1

如果您使用jQuery，可以通过ajax调用下载页面：

$.ajax({
  url: 'newTaskModal.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
    // todo:  add the html to the dom...
  }
});

如果你正在构建单页应用程序，你可能想要查看一个专门解决这类问题的框架： Durandal。

- Jeremy Danyow

---

理想情况下，我只需将收到的 HTML 加载到我的 index.html 中的 div 中，问题就解决了（简直不敢相信我自己没想到这个问题...）。谢谢！那个框架看起来也非常有用。我会在这个周末试一试。也谢谢你提供的建议！:) - User999999

Answer 2

您可以使用JQuery将您的html页面加载到匹配的元素中。

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

请访问http://api.jquery.com/load/了解更多信息。

- Austin Poole

Answer 3

你会使用PHP吗？如果可以，那么这有一个简单的解决方案。

你的主页将是index.php，在你想要放置模态框的地方，只需放置以下代码即可：

<?php include "newTaskModal.html"; ?>

- Droow

---

我知道可以使用´php-include´，但我更倾向于纯HTML/JavaScript解决方案的方向。 - User999999

Answer 4

步骤1：使用以下代码创建链接：

STEP 1 使用以下代码创建链接：

<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>

步骤2：使用以下代码创建模态窗口。

请勿解释，保留HTML标记。

    <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog model-sm">`enter code here
        <div class="modal-content"> </div>
    </div>
</div>

步骤三：创建 MyModal.html 并添加一些文本。请保留 HTML 格式，不要进行解释。

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Title</h4>
</div>
    <div class="modal-body">
Modal Contents
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">OK</button>
    </div>

注意：这可能无法在本地HTML上运行，只能在服务器上运行！

- Pradeep