![动态构建]( "动态构建")
然而，这仅允许将内容注入.modal-body，而不是动态构建整个模态.有没有办法用JS动态构建整个modal，包括.modal-header、.modal-footer?用字符串来做这件事似乎很笨拙，如下所示:partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\'").gsub("", "") 解决方案更新:自从发布这篇文章以来，我发现了一个优雅的 bootstrap 3 模态包装函数 此处，不需要在 html 代码中添加 div.这是一个演示这一点的代码示例.要使用，只需在 中添加一个 div(在 bootstrap 的 <div class="container"> 中，例如:<div id="idMyModal"></div>然后您可以通过以下方式使用它:var header = "这是我的动态标题";var content = "这是我的动态内容";var strSubmitFunc = "applyButtonFunc()";var btnText = "做吧！";doModal('idMyModal', 标题, 内容, strSubmitFunc, btnText);要关闭模态，请调用 hideModal，也定义如下:function doModal(placementId, Heading, formContent, strSubmitFunc, btnText){var html = '<div id="modalWindow" class="modal hidefade in" style="display:none;">';html += '';html += '<a class="close" data-dismiss="modal">×</a>';html += '<h4>'+标题+'</h4>'html += '</div>';html +='';html += '';html += 表单内容；html += '</div>';html += '';如果(btnText！=''){html += '<span class="btn btn-success"';html += ' onClick="'+strSubmitFunc+'">'+btnText;html += '</span>';}html += '';html += '关闭';html += '</span>';//关闭按钮html += '</div>';//页脚html += '</div>';//模态窗口$("#"+placementId).html(html);$("#modalWindow").modal();}函数 hideModal(){//使用非常通用的选择器 - 这是因为 $('#modalDiv').hide//将移除模态窗口而不是遮罩$('.modal.in').modal('隐藏');}I am building a Rails application, and I want to place the content from a Rails partial into the modal via 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#modalsHowever, this only allows content to be injected into the .modal-body, rather than building the whole modal dynamically.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("", "") 解决方案 Update: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.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);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 模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-31 04:19