动态构建Twitter Bootstrap模式

小编典典

动态构建Twitter Bootstrap模式

ajax

我正在构建一个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", "")

阅读 207

2020-07-26

共1个答案

小编典典

更新：

由于张贴这，我找到了一个优雅的引导模式3包装函数在这里，不需要添加一个div的HTML代码。

这是一个演示此情况的代码示例。要使用它，只需在中添加一个div（例如，在引导程序的

内部）：

<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');
}

2020-07-26