动态构建Twitter Bootstrap模式
我正在构建一个Rails应用程序，我想通过AJAX将Rails部分内容放入模态中。
在Twitter Bootstrap 2.3.2模式中，我通过文档阅读您可以使用远程密钥通过ajax加载内容。
http://getbootstrap.com/2.3.2/javascript.html#modals
但是，这只允许将内容注入.modal-body ，而不是动态构建整个模态。
有没有办法用JS动态构建整个模态，包括.modal-header ， .modal-footer ？
使用字符串执行此操作似乎非常笨重，如下所示：
partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\\\'").gsub("\n", "")
更新：
发布之后，我在这里找到了一个优雅的bootstrap 3模态包装函数，它不需要在html代码中添加div。
这是一个演示这个的代码示例。 要使用，只需在
中添加一个div（在bootstrap的
然后你可以通过以下方式使用它：
var header = "This is my dynamic header"; var content = "This is my dynamic content"; var strSubmitFunc = "applyButtonFunc()"; var btnText = "Just do it!"; doModal('idMyModal', header, content, strSubmitFunc, btnText);
要关闭模态，请调用hideModal，也定义如下：
function doModal(placementId, heading, formContent, strSubmitFunc, btnText) { var html = ''; // modalWindow $("#"+placementId).html(html); $("#modalWindow").modal(); } function hideModal() { // Using a very general selector - this is because $('#modalDiv').hide // will remove the modal window but not the mask $('.modal.in').modal('hide'); }
更新
我最近偶然发现了bootbox.js ，这是一个专门用于动态创建引导模式并响应用户与它们交互的整个库。 虽然与下面的方法不同，但bootbox接受回调而不是函数名称。 我还没有亲自使用它，因为我无法certificate26kb库基本上可以完成下面的function。 但我认为有人可能会发现它很有用。
2016年8月17日更新
我现在几乎每个需要动态模态的项目都使用bootbox。 工作得很好我强烈推荐它。
更新10/1/2018
Bootbox还没有正式支持bootstrap 4，但是有一个bootbox v5.x分支，他们正在使用bootstrap 4支持。 根据5.0.0路线图和Bootbox 5.0发货清单票，听起来这个分支已经准备好了，但他们还没有发布它。 但是有一些关于如何使用它的说明。 免责声明：我还没有习惯v5.x分支，不能保证其完整性。
原帖
代码取自Ammon上面的回答。 更新bootstrap 3.0
function doModal(placementId, heading, formContent, strSubmitFunc, btnText) { html = ''; // modalWindow $("#"+placementId).html(html); $("#modalWindow").modal(); $("#dynamicModal").modal('show'); }
这就是我最终用于满足我的需求。 还包括一个事件处理程序，用于在关闭时从DOM中删除模态。 我只需要一个信息模式，所以我拿出了提交函数和按钮文本参数。
function doModal(heading, formContent) { html = ''; // modalWindow $('body').append(html); $("#dynamicModal").modal(); $("#dynamicModal").modal('show'); $('#dynamicModal').on('hidden.bs.modal', function (e) { $(this).remove(); }); }
使用DOM，我创建了Button以及单击Button时弹出的Bootstrap模式。
还包括HTML页面的head部分：
整个代码需要用JS文件编写。
//首先，创建一个按钮，在单击时显示Bootstrap模态
var button = document.createElement("input"); button.className = 'btn btn-info btn-lg'; button.setAttribute("type", "button"); button.setAttribute("data-toggle", "modal"); button.setAttribute("data-target", "#myModal"); button.setAttribute("value", "More Information..."); document.getElementsByTagName('body')[0].appendChild(button);
//模块创建：
var div1 = document.createElement('div'); div1.id = 'myModal'; div1.className = 'modal fade'; div1.setAttribute("role", "dialog"); var innerDiv1m = document.createElement('div'); innerDiv1m.className = 'modal-dialog modal-sm'; div1.appendChild(innerDiv1m); var innerDiv2m = document.createElement('div'); innerDiv2m.className = 'modal-content'; innerDiv1m.appendChild(innerDiv2m); var innerDiv3 = document.createElement('div'); innerDiv3.className = 'modal-header'; innerDiv2m.appendChild(innerDiv3); var buttonM = document.createElement("button"); buttonM.className = 'close'; buttonM.setAttribute("data-dismiss", "modal"); buttonM.setAttribute("aria-hidden", "true"); buttonM.setAttribute("value", "Close"); innerDiv3.appendChild(buttonM); var headerM = document.createElement("H4"); headerM.className = 'modal-title'; innerDiv3.appendChild(headerM); var innerDiv31 = document.createElement('div'); innerDiv31.className = 'modal-body'; innerDiv2m.appendChild(innerDiv31); var para = document.createElement('p'); innerDiv31.appendChild(para); para.innerHTML = "paragraph"; var innerDiv32 = document.createElement('div'); innerDiv32.className = 'modal-footer'; innerDiv2m.appendChild(innerDiv32); var closeButton = document.createElement("input"); closeButton.className = 'btn btn-default'; closeButton.setAttribute("data-dismiss", "modal"); closeButton.setAttribute("type", "button"); closeButton.setAttribute("value", "Close"); innerDiv32.appendChild(closeButton); document.getElementsByTagName('body')[0].appendChild(div1);
//因此，单击创建的按钮时，模板会在屏幕上弹出。
与接受的答案非常相似的主题，但写作jQuery插件。 我正在寻找一些逻辑来构建一个我正在工作的工具包，但找不到任何这样写的。
下面有很多代码，但它的设计是一次编写，之后很容易调用，所以作为一个扰流板，一旦你拥有它所有设置它就像下面这样容易使用：
$.fn.alert("utils.js makes this so easy!");
作为一个完整的工作示例：
https://jsfiddle.net/63zvqeff/
页面上不需要任何现有的
，它可以使用嵌套对话框，它是从我正在处理的工具包中获取的，所以我已经包含了所有相关的位，所以它是一个工作的复制/粘贴例。
(function ($) { $.utils = { // http://stackoverflow.com/a/8809472 createUUID: function () { var d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); //use high-precision timer if available } var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } } $.fn.dialogue = function (options) { var defaults = { title: "", content: $(""), closeIcon: false, id: $.utils.createUUID(), open: function () { }, buttons: [] }; var settings = $.extend(true, {}, defaults, options); // create the DOM structure var $modal = $("").attr("id", settings.id).attr("role", "dialog").addClass("modal fade") .append($("").addClass("modal-dialog") .append($("").addClass("modal-content") .append($("").addClass("modal-header") .append($("").addClass("modal-title").text(settings.title))) .append($("").addClass("modal-body") .append(settings.content)) .append($("").addClass("modal-footer") ) ) ); $modal.shown = false; $modal.dismiss = function () { // loop until its shown // this is only because you can do $.fn.alert("utils.js makes this so easy!").dismiss(); in which case it will try to remove it before its finished rendering if (!$modal.shown) { window.setTimeout(function () { $modal.dismiss(); }, 50); return; } // hide the dialogue $modal.modal("hide"); // remove the blanking $modal.prev().remove(); // remove the dialogue $modal.empty().remove(); $("body").removeClass("modal-open"); } if (settings.closeIcon) $modal.find(".modal-header").prepend($("").attr("type", "button").addClass("close").html("×").click(function () { $modal.dismiss() })); // add the buttons var $footer = $modal.find(".modal-footer"); for(var i=0; i < settings.buttons.length; i++) { (function (btn) { $footer.prepend($("").addClass("btn btn-default") .attr("id", btn.id) .attr("type", "button") .text(btn.text) .click(function () { btn.click($modal) })) })(settings.buttons[i]); } settings.open($modal); $modal.on('shown.bs.modal', function (e) { $modal.shown = true; }); // show the dialogue $modal.modal("show"); return $modal; }; })(jQuery);
然后，当你想要一个基本的警报时，我写了一个辅助函数（）
(function ($) { $.fn.alert = function (message) { return $.fn.dialogue({ title: "Alert", content: $("").text(message), closeIcon: true, buttons: [ { text: "Close", id: $.utils.createUUID(), click: function ($modal) { $modal.dismiss(); } } ] }); }; })(jQuery);
否则，您需要将内容构建为jQuery对象，然后以对象的forms传递，如：
{ title: "", // what ever you want in the title bar content: $(""), // any DOM structure you can build as a jQuery object closeIcon: false, // does the dialogue have a X in the tilte bar to close it id: $.utils.createUUID(), // a reference id open: function () { }, // a function called after the DOM structure is built but BEFORE rendering buttons: [ // an array of buttons to include in the footer // example "close" button, all buttons get a reference to $modal passed into them // .dismiss() is a function attached to $modal to revert the DOM changes { text: "Close", click: function ($modal) { $modal.dismiss(); } } ] };
我有同样的问题，经过大量的研究，我最终建立了一个js函数，根据我的要求动态创建模态。 使用此function，您可以在一行中创建弹出窗口，例如：
puyModal（{title：’Test Title’，标题：’Heading’，消息：’这是示例消息。’}）
或者您可以使用其他复杂function，例如iframe，video弹出窗口等。
在https://github.com/aybhalala/puymodals上找到它。有关演示，请访问http://pateladitya.com/puymodals/