是否可以从不在 DOM 中的 HTML 代码创建 bootstrap 3 模式？答案

【问题标题】：Is it possible to create a bootstrap 3 modal from HTML code that is not in the DOM?是否可以从不在 DOM 中的 HTML 代码创建 bootstrap 3 模式？
【发布时间】：2014-09-03 21:55:47
【问题描述】：

我在一个变量（内存中）中有一个 bootstrap 3 modal 的 html，例如：

  var modalHTML = "<div class='modal'>...etc...</div>"

（想知道为什么？因为它是从 Handlebars.js 模板生成的）

我不想将那段 html 附加到 DOM，因为我必须关心重复的 id 等。

我想对那段 html 进行模态化。

在 bootstrap 3 中以这种方式进行模态化：

 $("#foo").modal();

问题是：我可以对我的 html 进行模态化吗？

当然我试过了，但没有用：

 modalHTML.modal();

用真实代码编辑：

  var place = {...}
  var template = Handlebars.compile($("#place-modal-template").html());
  template(place).modal();

【问题讨论】：

是的，它有效。你在哪里挂断电话？
编辑添加真实代码
我做了一个小提琴：jsfiddle.net/u7bvfkd7 有趣的是背景引起了问题。
背景完好无损的原因是模板中有 HTML cmets！ (stackoverflow.com/a/18743080/575199) ...新小提琴：jsfiddle.net/2t5Lv3q5

标签： jquery twitter-bootstrap handlebars.js bootstrap-modal

【解决方案1】：

我将模态插入 DOM 的整个问题是：（引自我的问题）

我不想将那段 html 附加到 DOM，因为我会必须关心重复的 id 等。

最后这不是问题（*）所以我这样做了：

查看：

<script type="text/x-handlebars" id="place-modal-template">
    <div id="my-modal" (...)
</script>

<!-- Tthis is what I didn't wanted to have but ended up writing: -->
<div id="modal-container"></div>

代码：

var place = {...}
var template = Handlebars.compile($("#place-modal-template").html());

// Original intention was to not insert into DOM, like this:
// template(place).modal();
//
// But ended up doing this:

$("#modal-container").html(template(place));
$("#my-modal").modal();

(*) 这不是问题，因为我使用 .html(...) 而不是 $("#modal-container").append(...)

【讨论】：

【解决方案2】：

你可以试试这样的：

$(function(){
  var modalHTML = "<div class='modal' id='test'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'>";
  modalHTML += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button><h4 class='modal-title'>Modal title</h4>";
  modalHTML += "</div><div class='modal-body'>Content for the dialog / modal goes here.</div><div class='modal-footer'>";
  modalHTML += "<a href='#' data-dismiss='modal' class='btn'>Close</a><a href='#' class='btn btn-primary'>Save changes</a></div></div></div>"; 
  var test = $.parseHTML( modalHTML );
  console.log(test);
  $(test).modal();
});

工作小提琴：http://jsfiddle.net/robertrozas/wpu7hogc/3/

【讨论】：

嗯，这个半成品：模态出现了，但是当我关闭它时，背景（黑色 90%）仍然存在。这是代码：var template = Handlebars.compile($("#place-modal-template").html());; var test = $.parseHTML(template(place)); $(test).modal();

【解决方案3】：

您可以将原始 HTML 代码传递给 $，即 $("<div>Hello, World!</div>") 在 jQuery 中是可以的。您可以使用此功能构建一个不在文档 DOM 中的元素，如果它是一个模态元素，您可以像在 Bootstrap 3 文档中那样调用.modal("show")。

至关重要的是，上述 HTML 代码由单个元素组成，即 Bootstrap 3 文档中的模式 不正确，因为它有一个尾随注释 ，正如 gasman 在 @ 987654321@另一个问题。

function showModal(title, body) {
    var html = '<div class="modal fade" tabindex="-1" role="dialog">' +
    '<div class="modal-dialog">' +
    '<div class="modal-content">' +
    '<div class="modal-header">' +
    '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
    '<h4 class="modal-title">' + title + '</h4>' +
    '</div>' +
    '<div class="modal-body">' +
    '<p>' + body + '</p>' +
    '</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>';

    var modal = $(html);
    modal.modal("show");
}

【讨论】：