JS动态设置确认弹窗

多次使用确认弹窗

<!--START 确认收货-->
<div class="popout-boxbg out" id="delivery_goods">
    <div class="popout-box-ios">
        <div class="header center font-size-16" name="confirm_dialog_title">随便编一点 </div>
        <div class="content c-gray-dark font-size-14" name="confirm_dialog_content">确认收货后，订单交易完成。 </div>
        <div class="action-container">
            <button class="js-ok" name="confirm_dialog_confirmbtn">确认收货</button>
            <button class="js-cancel" name="confirm_dialog_cancelbtn">取消</button>
        </div>
    </div>
</div>
<!--确认弹窗对象-->
<script>
    var confirmDialogModel = {
        //传入主题，内容，确认按钮字，取消按钮字，确认按钮事件，取消事件事件，确认事件参数数组，取消事件参数数组
        Init: function (title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam) {
            //设置数据 
            this.InitData(title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam);
            this.EditModal();
            $("#" + this.ID).addClass("in");
        },
        ID: "delivery_goods",
        Title: "确认弹窗",
        Content: "确认后，事件完成",
        ConfirmButtonFunc: function () { alert("确认点击") },
        ConfirmButtonText: "确认",
        CancelButtonFunc: function () { $("#" + this.ID).removeClass("in"); },
        CancelButtonText: "取消",
        ConfirmParam: {},//确认传递的参数值
        CancelParam: {},//取消传递的参数值
        InitData: function (title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam) {
            if (title != undefined) {
                this.Title = title;
            }
            else {
                this.Title = "确认";
            }
            if (content != undefined) {
                this.Content = content;
            }
            else {
                this.Content = "确认后，事件完成。";
            }
            if (confirmText != undefined) {
                this.ConfirmButtonText = confirmText;
            }
            else {
                this.ConfirmButtonText = "确认";
            }
            if (cancelText != undefined && confirmText != "") {
                this.CancelButtonText = cancelText;
            }
            else {
                this.CancelButtonText = "取消";
            }
            if (confirmFunc != undefined && typeof confirmFunc == "function") {
                this.ConfirmButtonFunc = confirmFunc;
            }
            else {
                this.ConfirmButtonFunc = function () {
                    alert("确认按钮点击");
                    $("#" + this.ID).removeClass("in");
                }
            }
            if (cancelFunc != undefined && typeof confirmFunc == "function") {
                this.CancelButtonFunc = cancelFunc;
            }
            else {
                this.CancelButtonFunc = function () {
                    alert("取消按钮点击");
                    $("#" + this.ID).removeClass("in");
                }
            }
            if (confirmParam == undefined) {
                this.ConfirmParam = {};
            }
            else {
                this.ConfirmParam = confirmParam;
            }
            if (cancelParam == undefined) {
                this.CancelParam = {};
            }
            else {
                this.CancelParam = cancelParam;
            }
        },
        EditModal: function () {
            var obj = $("#" + this.ID);
            $(obj).find("[name=confirm_dialog_title]").text(this.Title);
            $(obj).find("[name=confirm_dialog_content]").text(this.Content);
            $(obj).find("[name=confirm_dialog_confirmbtn]").text(this.ConfirmButtonText);
            $(obj).find("[name=confirm_dialog_cancelbtn]").text(this.CancelButtonText);
            $(obj).find("[name=confirm_dialog_confirmbtn]").off("click");
            $(obj).find("[name=confirm_dialog_confirmbtn]").on("click", this.ConfirmButtonFunc);
            $(obj).find("[name=confirm_dialog_cancelbtn]").off("click");
            $(obj).find("[name=confirm_dialog_cancelbtn]").on("click", this.CancelButtonFunc);
        },
        CloseModal: function () {
            $("#" + this.ID).removeClass("in");
        }
    };
</script>
<!--START 收货按钮点击-->
    <script>
        function receipt(id) {
            confirmDialogModel.Init("确认收货", "确认收货后，订单交易完成。", "确认收货", "取消", confirmReceipt, undefined, { "id": id }, {});
        }
    </script>
    <!--START 确认收货-->

 其中如果想放html类型的内容，如<span style="color:red">主题名</span>，那替换的时候就用$(obj).html("<span style="color:red">主题名</span>")。

主要是嫌多个弹窗，都要加一个html，还不如用一个，反正每次也只允许弹一个。忘记说了，这个需要添加浮层的，就是不允许后面的html点击。至于样式，自由发挥吧

<div class="popout-boxbg out" id="delivery_goods">
    <div class="popout-box-ios">
        <div class="header center font-size-16" name="confirm_dialog_title">随便编一点 </div>
        <div class="content c-gray-dark font-size-14" name="confirm_dialog_content">确认收货后，订单交易完成。 </div>
        <div class="action-container">
            <button class="js-ok" name="confirm_dialog_confirmbtn">确认收货</button>
            <button class="js-cancel" name="confirm_dialog_cancelbtn">取消</button>
        </div>
    </div>
</div>