javascript - 如何在单击链接时将动态内容添加到 Bootstrap 模式 - Jquery/JS

Question

我有一个链接，单击它会显示 Bootstrap 模式。但是，我需要根据应用的条件在模式中显示动态内容。

Js:

     if (success) {
        $("#basicModal").modal('show').html("success"); //doesnt work
     }else if (error){
        $("#basicModal").modal('show').html("error"); //something like this, but doesnt work
     }

这是 html:

 <a class="button-link" data-toggle="modal"  data-target="#basicModal">click to test</a>

    //bootstrap modal

     <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <h3>Modal Body</h3>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
          </div>
        </div>

有什么想法可以实现吗？谢谢!!

Answer 1

您可以使用 bootstrap 的以下事件来附加动态内容:

<强> DEMO //将 success 的值更改为 true 或 false 以测试场景

if (success) {
        $("#basicModal").on("shown.bs.modal", function () {  //Tell what to do on modal open
             $(this).find('.modal-body').append('success')
        }).modal('show'); //open the modal once done
}else if (error){
        $("#basicModal").on("shown.bs.modal", function () { 
             $(this).find('.modal-body').append('fail')
        }).modal('show');
}

如果您想清除所有内容并将其添加为新内容，则只需使用 html 而不是如下所示的 append

$(this).find('.modal-body').html('success')