从其他 html 文件打开模态（引导程序）

Posted 2023-02-22

【中文标题】从其他 html 文件打开模态（引导程序）

【英文标题】：Open Modal (bootstrap) from other html-file

【发布时间】：2014-06-19 02:13:20

【问题描述】：

我正在使用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（公司标准）

【参考方案1】：

如果您使用的是 jquery，则可以使用 ajax 调用下载页面：

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

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

【讨论】：

理想情况下！我只是将收到的 html 加载到我的 index.html 上的 div 中，问题就解决了（不敢相信我自己无法提出这个问题......）。谢谢！该框架看起来也很有用。这个周末我会试一试。也谢谢你！ :)

【参考方案2】：

你会使用 php 吗？如果是这样，有一个简单的解决方案。

您的索引将是 index.php，而您希望将模式放置在此代码的位置

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

【讨论】：

我知道使用 'php-include' 的可能性，但我正在寻找更多纯 HTML/javascript 解决方案的方向

【参考方案3】：

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

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

转至http://api.jquery.com/load/ 了解更多信息。

【参考方案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。仅适用于服务器！