xcConfirm弹出框

效果：

引入JS：

<script src="/assets/js/xcConfirm.js" type="text/javascript"
charset="utf-8"></script>

assets/js/xcConfirm.js

/** 使用说明:* window.wxc.Pop(popHtml, [type], [options])* popHtml:html字符串* type:window.wxc.xcConfirm.typeEnum集合中的元素* options:扩展对象* 用法:* 1. window.wxc.xcConfirm("我是弹窗<span>lalala</span>");* 2. window.wxc.xcConfirm("成功","success");* 3. window.wxc.xcConfirm("请输入","input",{onOk:function(){}})* 4. window.wxc.xcConfirm("自定义",{title:"自定义"})*/
(function($){window.wxc = window.wxc || {};window.wxc.xcConfirm = function(popHtml, type, options) {var btnType = window.wxc.xcConfirm.btnEnum;var eventType = window.wxc.xcConfirm.eventEnum;var popType = {info: {title: "信息",icon: "0 0",//蓝色ibtn: btnType.ok},success: {title: "成功",icon: "0 -48px",//绿色对勾btn: btnType.ok},error: {title: "错误",icon: "-48px -48px",//红色叉btn: btnType.ok},confirm: {title: "提示",icon: "-48px 0",//黄色问号btn: btnType.okcancel},warning: {title: "警告",icon: "0 -96px",//黄色叹号btn: btnType.okcancel},input: {title: "输入",icon: "",btn: btnType.ok},custom: {title: "",icon: "",btn: btnType.ok}};var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化输入的参数:弹窗类型var config = $.extend(true, {//属性title: "", //自定义的标题icon: "", //图标btn: btnType.ok, //按钮,默认单按钮//事件onOk: $.noop,//点击确定的按钮回调onCancel: $.noop,//点击取消的按钮回调onClose: $.noop//弹窗关闭的回调,返回触发事件}, itype, options);var $txt = $("<p>").html(popHtml);//弹窗文本domvar $tt = $("<span>").addClass("tt").text(config.title);//标题var icon = config.icon;var $icon = icon ? $("<div>").addClass("bigIcon").css("backgroundPosition",icon) : "";var btn = config.btn;//按钮组生成参数var popId = creatPopId();//弹窗索引var $box = $("<div>").addClass("xcConfirm");//弹窗插件容器var $layer = $("<div>").addClass("xc_layer");//遮罩层var $popBox = $("<div>").addClass("popBox");//弹窗盒子var $ttBox = $("<div>").addClass("ttBox");//弹窗顶部区域var $txtBox = $("<div>").addClass("txtBox");//弹窗内容主体区var $btnArea = $("<div>").addClass("btnArea");//按钮区域var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("确定");//确定按钮var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("取消");//取消按钮var $input = $("<input>").addClass("inputBox");//输入框var $clsBtn = $("<a>").addClass("clsBtn");//关闭按钮//建立按钮映射关系var btns = {ok: $ok,cancel: $cancel};init();function init(){//处理特殊类型inputif(popType["input"] === itype){$txt.append($input);}creatDom();bind();}function creatDom(){$popBox.append($ttBox.append($clsBtn).append($tt)).append($txtBox.append($icon).append($txt)).append($btnArea.append(creatBtnGroup(btn)));$box.attr("id", popId).append($layer).append($popBox);$("body").append($box);}function bind(){//点击确认按钮$ok.click(doOk);//回车键触发确认按钮事件$(window).bind("keydown", function(e){if(e.keyCode == 13) {if($("#" + popId).length == 1){doOk();}}});//点击取消按钮$cancel.click(doCancel);//点击关闭按钮$clsBtn.click(doClose);}//确认按钮事件function doOk(){var $o = $(this);var v = $.trim($input.val());if ($input.is(":visible"))config.onOk(v);elseconfig.onOk();$("#" + popId).remove(); config.onClose(eventType.ok);}//取消按钮事件function doCancel(){var $o = $(this);config.onCancel();$("#" + popId).remove(); config.onClose(eventType.cancel);}//关闭按钮事件function doClose(){$("#" + popId).remove();config.onClose(eventType.close);$(window).unbind("keydown");}//生成按钮组function creatBtnGroup(tp){var $bgp = $("<div>").addClass("btnGroup");$.each(btns, function(i, n){if( btnType[i] == (tp & btnType[i]) ){$bgp.append(n);}});return $bgp;}//重生popId,防止id重复function creatPopId(){var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//弹窗索引if($("#" + i).length > 0){return creatPopId();}else{return i;}}};//按钮类型window.wxc.xcConfirm.btnEnum = {ok: parseInt("0001",2), //确定按钮cancel: parseInt("0010",2), //取消按钮okcancel: parseInt("0011",2) //确定&&取消};//触发事件类型window.wxc.xcConfirm.eventEnum = {ok: 1,cancel: 2,close: 3};//弹窗类型window.wxc.xcConfirm.typeEnum = {info: "info",success: "success",error:"error",confirm: "confirm",warning: "warning",input: "input",custom: "custom"};})(jQuery);

使用：

var txt = "确定为车牌号: " + cph + " 添加定检信息?";var option = {title: "添加定检信息",btn: parseInt("0011", 2),//按钮类型，可以是单个onOk: function () {//写点击缺认后需要实现的逻辑}}window.wxc.xcConfirm(txt, "custom", option);

xcConfirm弹出框相关推荐

android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
IOS8中SWIFT 弹出框的显示
弹出框不管是在网页端,还是在手机APP端,都是常用的控件.在网页中实现个简单的弹出框只需要调用alert,在IOS中,也不是那么复杂,也是容易使用的. 我先用xcode6创建一个名为iOS8Swift ...
QTP的那些事---页面弹出框的处理，页面等待加载的处理
处理方法:先判断父类对象是否存在,如果存在,判断相关的static文本对象是否存在,如果存在,则点击弹出框中的按钮即可: 例如如下的代码: 设置循环判断dialog对象是否存在,如果存在,就去点击相关 ...
php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单，如题我们使用模态弹出框+ajax - phpStudy...
Yii2.0 模态弹出框+ajax提交表单如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...
Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）...
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"><th>内容</th><td><!-- <textarea r ...
基于HTML5 Canvas 实现弹出框
2019独角兽企业重金招聘Python工程师标准>>> 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图 ...
jfinal为weebox弹出框传递参数
版权声明:欢迎转载,请注明沉默王二原创. https://blog.csdn.net/qing_gee/article/details/48712953 前言:jfinal为weebox弹出框传递参数 ...

xcConfirm弹出框

效果：

引入JS：

<script src="/assets/js/xcConfirm.js" type="text/javascript"
charset="utf-8"></script>

assets/js/xcConfirm.js

xcConfirm弹出框相关推荐

最新文章

热门文章

xcConfirm弹出框

效果：

引入JS：

<script src="/assets/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>

assets/js/xcConfirm.js

xcConfirm弹出框相关推荐

最新文章

热门文章

<script src="/assets/js/xcConfirm.js" type="text/javascript"
charset="utf-8"></script>