多次使用确认弹窗

 <!--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>

JS动态设置确认弹窗的更多相关文章

  1. js动态设置padding-top遇到的坑

    我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...

  2. Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见

    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...

  3. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

  4. js动态设置根元素的rem方案

    方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...

  5. js动态设置输入框字体/颜色

    动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...

  6. JS动态设置css的几种方式

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element. ...

  7. js 动态设置键值对数组 ,类似于 java 的Map 类型

    1.前言 我想设置一个数据  var json = {a1 :1  , a2 :2  , a3 :3  .....} 这样的动态数据 ,怎么写呢? 2.正确写法 var json = []; for ...

  8. Js动态设置rem来实现移动端字体的自适应

    //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...

  9. Js 动态设置DIV日期信息

    HTML代码如下: <div  id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...

随机推荐

  1. 《深入理解Java虚拟机》读书笔记:Java内存区域

    xmind文件下载地址

  2. Java如何合并两个数组?

    Java中,如何合并两个数组? 示例 本例展示了如何使用List类的List.Addall(array1.asList(array2))方法和Array类的Arrays.toString()方法将两个 ...

  3. CI框架 -- CLI执行php代码

    什么是CLI: CLI (命令行界面)是一种基于文本的和计算机交互的方式. 更多信息, 请查看 维基百科 . 为什么使用CLI? 虽然不是很明显,但是有很多情况下我们需要使用命令行来运行 CodeIg ...

  4. 设置 sqlserver Profiler 只监控 EF的sql执行请求

    当我们用EF执行语句的时候,可以使用 sqlserver Profiler来监控到底执行了哪些sql语句,但是默认他是监控全局的,我们只想监控Ef的语句,这里如下设置 这样就只会监控 EF产生的 sq ...

  5. linux stat命令参数及用法详解

    功能说明:显示inode内容.语 法:stat [文件或目录]补充说明:stat以文字的格式来显示inode的内容. ls 命令及其许多参数提供了一些非常有用的文件信息.另一个不太为人所熟知的命令 s ...

  6. c# 连接mysql配置config,不用装net connector

    <system.data> <DbProviderFactories> <remove invariant="MySql.Data.MySqlClient&qu ...

  7. 共享锁(S锁)和排它锁(X锁)

    释义 共享锁:(读取)操作创建的锁.其他用户可以并发读取数据,但任何事物都不能获取数据上的排它锁,直到已释放所有共享锁. 共享锁(S锁)又称为读锁,若事务T对数据对象A加上S锁,则事务T只能读A:其他 ...

  8. u3d changeTexs

    using UnityEngine; using System.Collections; using System.Collections.Generic; public class CTex : M ...

  9. 机器学习结果加ID插入数据库源码

    import org.apache.spark.mllib.evaluation.BinaryClassificationMetrics import org.apache.spark.mllib.l ...

  10. 图解HTTP学习笔记——简单的HTTP协议

    简单的HTTP协议 前言 最近在学习Web开发的相关知识,发现<图解HTTP>这本书通俗易懂.所以花时间学习这本书,并记录下学习笔记. 如上图,我们每天都在浏览网页,一般我们都是在浏览器地 ...