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>