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访问模态时: $("MobileAppPromoDiv").modal("切换");

问题在于模态框为空。

请多多指教

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>