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-files。如何将这些模态保存在不同的html/aspx - files？

中

示例： 如果按钮在index.Html内，但模态在newTaskModal.html内，我将如何打开模态？（如果两者都在index.html内，则没有问题）

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

Answer 1

如果你正在使用jquery，你可以使用ajax调用下载页面：

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

如果您要构建单个页面应用程序，则可能需要查看旨在解决此类问题的框架：的 durandal

Answer 2

你能用PHP吗？如果是这样，有简单的解决方案。

你的索引将是index.php，你想让你的模态只放置这段代码

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

Answer 3

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

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

转到http://api.jquery.com/load/了解详情。

Answer 4

第1步使用以下代码进行链接：

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

第2步使用以下代码进行模态窗口

    <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>

步骤3创建MyModal.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。仅适用于服务器！

从其他html文件打开Modal（bootstrap）

4 个答案: