bootstrap模态框封装的两种写法（记录）

function myPlugin() {
    function showConfirm(title, content) {
        this.html = '<div id="louis_confirm" class="modal" tabindex="-1">' +
                '<div class="modal-dialog modal-dialog-centered">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<h5 class="modal-title">' + title + '</h5>' +
                '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '<tton>' +
                '</div>' +
                '<div class="modal-body">' +
                '<p>' + content + '</p>' +
                '</div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-primary">确定<tton>' +
                '<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭<tton>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
    }
    showConfirm.prototype = {
        constructor: this,//我的理解是在继承的时候有用，不涉及到继承的时候不存在问题
        show: function (callback) {
            if ($("#louis_confirm")) {
                $("#louis_confirm").remove();
            }
            $("body").append(this.html);
            $("#louis_confirm").modal('show');
            var that=this;
            $("#louis_confirm").find(".btn-primary").on("click", function () {
                callback();
                that.hide();
            });
        },
        hide: function () {
            if ($("#louis_confirm")) {
                $("#louis_confirm").modal('hide');
            }
        }
    }
    return {showConfirm:showConfirm};
}

function showConfirm(title, content, callback) {
 
 var html = '<div id="louis_confirm" class="modal" tabindex="-1">' +
 '<div class="modal-dialog modal-dialog-centered">' +
 '<div class="modal-content">' +
 '<div class="modal-header">' +
 '<h5 class="modal-title">' + title + '</h5>' +
 '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
 '<span aria-hidden="true">&times;</span>' +
 '</button>' +
 '</div>' +
 '<div class="modal-body">' +
 '<p>' + content + '</p>' +
 '</div>' +
 '<div class="modal-footer">' +
 '<button type="button" class="btn btn-primary">确定</button>' +
 '<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>';
 function show() {
 
 if ($("#louis_confirm")) {
 $("#louis_confirm").remove();
 }
 $("body").append(html);
 $("#louis_confirm").modal('show');
 $("#louis_confirm").find(".btn-primary").on("click", callback);
 }
 
 function hide() {
 if ($("#louis_confirm")) {
 $("#louis_confirm").modal('hide');
 }
 }
 
 return {
 show: show,
 hide: hide
 };
 }