jquery - 如何加载模式对话框的远程内容？

Question

我正在尝试使用模态来显示通过 AJAX 或类似方式检索到的一些小表单。

我已经在这里找到了一些类似的问题和答案，但是关于 deprecation of remote for modals 的评论也是(source)。

为了与 bootstrap 的 future 版本 4 兼容，我想以“正确”的方式实现它，但我不知道如何做到这一点。
我发现的大多数内容都是针对 3.1 或更早版本的。

我会在 show.bs.modal 上注册一个事件监听器并加载内容，但这是“正确”的方式吗？

感谢您提供有关如何开始的任何提示。

Answer 1

正如您从我的通用模式中看到的:

<div class="modal fade in" id="generic-modal" tabindex="-1" role="dialog" aria-labelledby="mySuccessModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div id="generic-modal-background" class="modal-content" style="background-color:#5cb85c; color:#fff;">
            <div class="model-body">
                <div class="row">
                    <div class="col-xs-3">
                        <div id="generic-modal-left">
                            <span id="generic-modal-icon" class="glyphicon glyphicon-ok"></span>
                        </div>
                    </div>
                    <div class="col-xs-9">
                        <div id="generic-modal-right">
                            <p id="generic-modal-title" class="lead">Success!</p>
                            <p id="generic-modal-content">You did it, the changes were made!</p>
                            <button id="generic-modal-button" type="button" class="btn btn-default btn-default" data-dismiss="modal">Great</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我已经在想要更改的元素上设置了 ID，然后当我通过 jquery 调用模型时，我使用此函数更新这些 id:

function showModal(modalType, title, content, button) {

        switch (modalType) {
            case "success":
                $('#generic-modal-background').css('background-color', '#5cb85c');
                $('#generic-modal-icon').removeClass();
                $("#generic-modal-icon").addClass("glyphicon glyphicon-ok");
                break;
            case "fail":
                $('#generic-modal-background').css('background-color', '#d9534f');
                $('#generic-modal-icon').removeClass();
                $("#generic-modal-icon").addClass("glyphicon glyphicon-remove");
                break;
            default:
                break;
        }

        $('#generic-modal-title').html(title);
        $('#generic-modal-content').html(content);
        $('#generic-modal-button').html(button);

        $('#generic-modal').modal('show');
    }

然后当我想使用它时，我调用函数 show modal:

showModal("fail", "Error!", "There was an error saving your changes. Please try again later.", "Close");