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>
JS动态设置确认弹窗的更多相关文章
- js动态设置padding-top遇到的坑
我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...
- Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见
我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置. 一.动态设 ...
- js动态设置窗体位置
1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...
- js动态设置根元素的rem方案
方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...
- js动态设置输入框字体/颜色
动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...
- JS动态设置css的几种方式
1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element. ...
- js 动态设置键值对数组 ,类似于 java 的Map 类型
1.前言 我想设置一个数据 var json = {a1 :1 , a2 :2 , a3 :3 .....} 这样的动态数据 ,怎么写呢? 2.正确写法 var json = []; for ...
- Js动态设置rem来实现移动端字体的自适应
//设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...
- Js 动态设置DIV日期信息
HTML代码如下: <div id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...
随机推荐
- 《深入理解Java虚拟机》读书笔记:Java内存区域
xmind文件下载地址
- Java如何合并两个数组?
Java中,如何合并两个数组? 示例 本例展示了如何使用List类的List.Addall(array1.asList(array2))方法和Array类的Arrays.toString()方法将两个 ...
- CI框架 -- CLI执行php代码
什么是CLI: CLI (命令行界面)是一种基于文本的和计算机交互的方式. 更多信息, 请查看 维基百科 . 为什么使用CLI? 虽然不是很明显,但是有很多情况下我们需要使用命令行来运行 CodeIg ...
- 设置 sqlserver Profiler 只监控 EF的sql执行请求
当我们用EF执行语句的时候,可以使用 sqlserver Profiler来监控到底执行了哪些sql语句,但是默认他是监控全局的,我们只想监控Ef的语句,这里如下设置 这样就只会监控 EF产生的 sq ...
- linux stat命令参数及用法详解
功能说明:显示inode内容.语 法:stat [文件或目录]补充说明:stat以文字的格式来显示inode的内容. ls 命令及其许多参数提供了一些非常有用的文件信息.另一个不太为人所熟知的命令 s ...
- c# 连接mysql配置config,不用装net connector
<system.data> <DbProviderFactories> <remove invariant="MySql.Data.MySqlClient&qu ...
- 共享锁(S锁)和排它锁(X锁)
释义 共享锁:(读取)操作创建的锁.其他用户可以并发读取数据,但任何事物都不能获取数据上的排它锁,直到已释放所有共享锁. 共享锁(S锁)又称为读锁,若事务T对数据对象A加上S锁,则事务T只能读A:其他 ...
- u3d changeTexs
using UnityEngine; using System.Collections; using System.Collections.Generic; public class CTex : M ...
- 机器学习结果加ID插入数据库源码
import org.apache.spark.mllib.evaluation.BinaryClassificationMetrics import org.apache.spark.mllib.l ...
- 图解HTTP学习笔记——简单的HTTP协议
简单的HTTP协议 前言 最近在学习Web开发的相关知识,发现<图解HTTP>这本书通俗易懂.所以花时间学习这本书,并记录下学习笔记. 如上图,我们每天都在浏览网页,一般我们都是在浏览器地 ...