我正在构建一个Rails应用程序,并且我想通过AJAX将Rails部分中的内容放入模式中。
在Twitter Bootstrap 2.3.2模式中,我阅读了文档,您可以使用远程密钥通过ajax加载内容。
http://getbootstrap.com/2.3.2/javascript.html#modals
但是,这仅允许将内容注入.modal-body,而不是动态构建整个模式。
.modal-body
有没有办法用JS动态构建整个模式,包括.modal-header,.modal-footer?
.modal-header
.modal-footer
用字符串执行此操作似乎很笨拙,如下所示:
partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\\\'").gsub("\n", "")
更新:
由于张贴这,我找到了一个优雅的引导模式3包装函数在这里,不需要添加一个div的HTML代码。
这是一个演示此情况的代码示例。要使用它,只需在
<div id="idMyModal"></div>
然后您可以通过以下方式使用它:
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 = '<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'); }