动态构建Twitter Bootstrap模式 [英] Dynamically build Twitter Bootstrap modal
问题描述
我正在构建一个Rails应用程序，我想通过AJAX将Rails部分内容放入模态中。
I am building a Rails application, and I want to place the content from a Rails partial into the modal via AJAX.
在Twitter Bootstrap 2.3.2模式中，我通过文档阅读您可以使用远程密钥通过ajax加载内容。
In a Twitter Bootstrap 2.3.2 modal, I read via the documentation that you can load content via ajax using the remote key.
http://getbootstrap.com/2.3.2 /javascript.html#modals
但是，这只允许将内容注入 .modal-body ，而不是动态构建整个模态。
However, this only allows content to be injected into the .modal-body, rather than building the whole modal dynamically.
有没有办法构建整个模态，包括 .modal-header ， .modal-footer ，用JS动态？
Is there a way to build the entire modal, including .modal-header, .modal-footer, dynamically with JS?
使用字符串执行此操作似乎非常笨重，如下所示：
It seems very clunky to do this with a string, like follows:
partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\\\'").gsub("\n", "")
推荐答案
更新：
自发布此消息后，我发现了一个优雅的bootstrap 3模态包装函数这里，不需要在html代码中添加div。
Since posting this, I've found an elegant bootstrap 3 modal wrapper function here, which doesn't require adding a div to the html code.
这是一个演示此代码的代码示例。要使用，只需在< body>中添加div（在bootstrap的< div class =容器内） > ;,例如：
Here's a code sample that demonstrates this. To use, just add a div in your <body> (inside bootstrap's <div class="container">, for example:
<div id="idMyModal"></div>
然后您可以通过以下方式使用它：
and then you can use it via:
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，也定义如下：
To close the modal, issue a call to hideModal, also defined below:
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
var html = '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
html += '<div class="modal-header">';
html += '<a class="close" data-dismiss="modal">×</a>';
html += '<h4>'+heading+'</h4>'
html += '</div>';
html += '<div class="modal-body">';
html += '<p>';
html += formContent;
html += '</div>';
html += '<div class="modal-footer">';
if (btnText!='') {
html += '<span class="btn btn-success"';
html += ' onClick="'+strSubmitFunc+'">'+btnText;
html += '</span>';
}
html += '<span class="btn" data-dismiss="modal">';
html += 'Close';
html += '</span>'; // close button
html += '</div>'; // footer
html += '</div>'; // 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');
}
这篇关于动态构建Twitter Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
