JS动态设置确认弹窗

多次使用确认弹窗

  1 <!--START 确认收货-->
  2 <div class="popout-boxbg out" id="delivery_goods">
  3     <div class="popout-box-ios">
  4         <div class="header center font-size-16" name="confirm_dialog_title">随便编一点 </div>
  5         <div class="content c-gray-dark font-size-14" name="confirm_dialog_content">确认收货后，订单交易完成。 </div>
  6         <div class="action-container">
  7             <button class="js-ok" name="confirm_dialog_confirmbtn">确认收货</button>
  8             <button class="js-cancel" name="confirm_dialog_cancelbtn">取消</button>
  9         </div>
 10     </div>
 11 </div>
 12 <!--确认弹窗对象-->
 13 <script>
 14     var confirmDialogModel = {
 15         //传入主题，内容，确认按钮字，取消按钮字，确认按钮事件，取消事件事件，确认事件参数数组，取消事件参数数组
 16         Init: function (title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam) {
 17             //设置数据 
 18             this.InitData(title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam);
 19             this.EditModal();
 20             $("#" + this.ID).addClass("in");
 21         },
 22         ID: "delivery_goods",
 23         Title: "确认弹窗",
 24         Content: "确认后，事件完成",
 25         ConfirmButtonFunc: function () { alert("确认点击") },
 26         ConfirmButtonText: "确认",
 27         CancelButtonFunc: function () { $("#" + this.ID).removeClass("in"); },
 28         CancelButtonText: "取消",
 29         ConfirmParam: {},//确认传递的参数值
 30         CancelParam: {},//取消传递的参数值
 31         InitData: function (title, content, confirmText, cancelText, confirmFunc, cancelFunc, confirmParam, cancelParam) {
 32             if (title != undefined) {
 33                 this.Title = title;
 34             }
 35             else {
 36                 this.Title = "确认";
 37             }
 38             if (content != undefined) {
 39                 this.Content = content;
 40             }
 41             else {
 42                 this.Content = "确认后，事件完成。";
 43             }
 44             if (confirmText != undefined) {
 45                 this.ConfirmButtonText = confirmText;
 46             }
 47             else {
 48                 this.ConfirmButtonText = "确认";
 49             }
 50             if (cancelText != undefined && confirmText != "") {
 51                 this.CancelButtonText = cancelText;
 52             }
 53             else {
 54                 this.CancelButtonText = "取消";
 55             }
 56             if (confirmFunc != undefined && typeof confirmFunc == "function") {
 57                 this.ConfirmButtonFunc = confirmFunc;
 58             }
 59             else {
 60                 this.ConfirmButtonFunc = function () {
 61                     alert("确认按钮点击");
 62                     $("#" + this.ID).removeClass("in");
 63                 }
 64             }
 65             if (cancelFunc != undefined && typeof confirmFunc == "function") {
 66                 this.CancelButtonFunc = cancelFunc;
 67             }
 68             else {
 69                 this.CancelButtonFunc = function () {
 70                     alert("取消按钮点击");
 71                     $("#" + this.ID).removeClass("in");
 72                 }
 73             }
 74             if (confirmParam == undefined) {
 75                 this.ConfirmParam = {};
 76             }
 77             else {
 78                 this.ConfirmParam = confirmParam;
 79             }
 80             if (cancelParam == undefined) {
 81                 this.CancelParam = {};
 82             }
 83             else {
 84                 this.CancelParam = cancelParam;
 85             }
 86         },
 87         EditModal: function () {
 88             var obj = $("#" + this.ID);
 89             $(obj).find("[name=confirm_dialog_title]").text(this.Title);
 90             $(obj).find("[name=confirm_dialog_content]").text(this.Content);
 91             $(obj).find("[name=confirm_dialog_confirmbtn]").text(this.ConfirmButtonText);
 92             $(obj).find("[name=confirm_dialog_cancelbtn]").text(this.CancelButtonText);
 93             $(obj).find("[name=confirm_dialog_confirmbtn]").off("click");
 94             $(obj).find("[name=confirm_dialog_confirmbtn]").on("click", this.ConfirmButtonFunc);
 95             $(obj).find("[name=confirm_dialog_cancelbtn]").off("click");
 96             $(obj).find("[name=confirm_dialog_cancelbtn]").on("click", this.CancelButtonFunc);
 97         },
 98         CloseModal: function () {
 99             $("#" + this.ID).removeClass("in");
100         }
101     };
102 </script>
103 <!--START 收货按钮点击-->
104     <script>
105         function receipt(id) {
106             confirmDialogModel.Init("确认收货", "确认收货后，订单交易完成。", "确认收货", "取消", confirmReceipt, undefined, { "id": id }, {});
107         }
108     </script>
109     <!--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>