Question

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

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

为了与未来版本4的bootstrap兼容，我想以“正确”的方式实现它，但我不知道如何做到这一点。
我找到的大部分内容都是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");

如何为模态对话框加载远程内容？

1 个答案: