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>