动态添加HTML和调用模态

Question

我想动态地向我的身体添加一段HTML，然后使用它来显示模态窗口。 modal.html是Bootstrap 4站点上示例的精确副本：

<div class="modal" tabindex="-1" role="dialog" id="dlgModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我使用以下代码加载：

$('body').append("modal.html");

当我检查ID是否存在时，我确实在开发人员的控制台中找到了一个对象，但在其上调用modal()没有任何效果：

» $("#dlgModal")
← Object { context: HTMLDocument http://127.0.0.1/index.html, selector: "#dlgModal" }

» ​$("#dlgModal").modal()   /* nothing happens */

如何通过Javascript加载HTML然后调用它上面的bootstrap方法？

Answer 1

你正在执行的代码，即$('body').append("modal.html");，只需添加一个文本节点'modal.html'作为正文的子代。它不会从您的服务器加载'modal.html'文件。

假设modal.html文件由服务器在<hostname>/modal.html提供，你的JS应该是这样的：

$.get('/modal.html', function(content) {
    $('body').append(content);
});

$.get('/modal.html')从您的服务器加载'modal.html'文件。从服务器加载文件时执行回调函数，此时您可以将返回的内容附加到“body”。

PS：要显示模态，你需要将字符串'show'传递给.modal函数。例如。 ​$("#dlgModal").modal('show')

Answer 2

我把一些电话混在一起。我不得不使用load()，但在我的body中执行此操作会删除已存在的所有内容，因此我添加了一个容器：

$('body').append("<div id='messageboxContainer'></div>");
$('#messageboxContainer').load("modal.html");

Answer 3

正如其他人所指出的，你对.append()的使用是不正确的，因为在你的例子中它只是输出文本'modal.html'。加载模式的触发器也将失败，因为您在DOM之外加载模式HTML模板。一个简单的解决方案如下：

$.ajax({
  url: 'modal-template.html',
  success: function(data) {
    $('body').append(data);
    $("#modal-id").modal();
  }
});

在上面的代码中，我们使用jQuery的内置AJAX支持来加载HTML模板。在成功加载时，我们将这些信息作为data并将其附加到body。此时你的模态及其相关ID现在存在于Dom中，因此我们触发模态。

但我个人的偏好是在默认HTML中有一个'shell'模式：

<div class="modal fade" tabindex="-1" id="your-modal" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content"></div>
  </div>
</div>

从那里你可以根据需要通过以下jQuery将内容插入到模式中：

$('body').on('click', '[data-toggle="modal"]', function(event) {
  var m_target = $(this).data("target"),
      m_path = $(this).attr("href");

  $(m_target + ' .modal-content').load(m_path); 
});

$('#your-modal').on('hidden.bs.modal', function (e) {
  $(this).find('.modal-content').empty().html('');
  $(this).modal('dispose');
});

第一位允许您将模态内容加载到现有的空白模态模板中。第二个确保当模态关闭时它被正确清空，这缓解了下一个模态触发器可能加载缓存/旧信息的潜在问题（特别是如果链接到无效的URL）。就像我说的......这个方法只是我的偏好，因为它保留了一个已经是DOM的一部分的ID。它也更灵活一点（同样只有意见），因为你可以传递额外的数据属性。在我的正常用法中，我还传递一个size属性来确定Modal应该有多大。