javascript - 使用 AJAX 填充 Bootstrap 模态体

Question

我想将从 AJAX 获得的 html 内容放入模态正文中，我设法通过 AJAX 正确获取 html，当我检查模态正文时，我看到 html 已插入，但我在 html 正文中看不到任何内容，我试过了玩身体的CSS，但没有任何效果。

AJAX 代码：

$.get("{{[byt_app_root]}}/control/byt_general_manager.tcl",{action:21},function(htmlContent){
$('body').append('\
<div class="modal hide fade" id="MobileAppPromoDiv">\
<div class="modal-header">\
<a class="close" data-dismiss="modal">×</a>\
</div>\
<div class="modal-body">\
'+htmlContent+'\
</div>\
</div>');
});

当我想通过 JS 访问 modal 时： $("MobileAppPromoDiv").modal("toggle");

问题是模式是空的。

请指教，

Answer 1

尝试这个

<div class="modal hide fade" id="MobileAppPromoDiv">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>
<script type="text/javascript">
    $.get("{{[byt_app_root]}}/control/byt_general_manager.tcl", { action: 21 }, function (htmlContent) {
        $('#MobileAppPromoDiv').find('.modal-body').append(htmlContent);
        $('#MobileAppPromoDiv').modal('show');
    });
</script>

Answer 2

使用$('.modal-body')选择器。

如果您使用的是导轨，例如

$('.modal-body').html('<%= escape_javascript( ... ) %>');

应该管用