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'作为body的子代。它不会从您的服务器加载“ 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）。就像我说的那样...该方法只是我的偏爱，因为它保留的ID已经是DOM的一部分。它还可以灵活一些（再次，仅提供意见），因为您可以将其他数据属性传递给它。在我的正常用法中，我还传递了size属性来确定Modal应该有多大。

动态添加HTML并调用模式

3 个答案: