Jquery 弹出对话框插件xcConfirm.js

Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Demo</title><link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}</style><script type="text/javascript">$(function(){$("#btn1").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);});$("#btn2").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);});$("#btn3").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);});$("#btn4").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);});$("#btn5").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);});$("#btn6").click(function(){var txt=  "请输入";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,{onOk:function(v){console.log(v);}});});$("#btn7").click(function(){var txt=  "自定义呀";var option = {title: "自定义",btn: parseInt("0011",2),onOk: function(){console.log("确认啦");}}window.wxc.xcConfirm(txt, "custom", option);});$("#btn8").click(function(){var txt=  "默认";window.wxc.xcConfirm(txt);});});</script></head><body><div class="" style="height: 768px;"><div class="sgBtn" id="btn1">弹窗1(信息)</div><div class="sgBtn" id="btn2">弹窗2(提示)</div><div class="sgBtn" id="btn3">弹窗3(警告)</div><div class="sgBtn" id="btn4">弹窗4(错误)</div><div class="sgBtn" id="btn5">弹窗5(成功)</div><div class="sgBtn" id="btn6">弹窗6(输入框)</div><div class="sgBtn" id="btn7">弹窗7(自定义)</div><div class="sgBtn" id="btn8">弹窗8(默认)</div></div></body>
</html>

引入的文件js和css文件如下:

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:"自定义"})* 只有确定按钮* $("#btn1").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);});有确认和取消按钮,图标是一个问号$("#btn2").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);});有确认和取消按钮,图标是一个叹号$("#btn3").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);});有确认,图标是一个错误$("#btn4").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);});$("#btn5").click(function(){var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);});$("#btn6").click(function(){var txt=  "请输入";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,{onOk:function(v){console.log(v);}});});*/
(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);

css文件如下:

/*垂直居中*/
.verticalAlign {vertical-align: middle;display: inline-block;height: 100%;margin-left: -1px;
}.xcConfirm .xc_layer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #333;opacity: 0.5;z-index: 2147000000;
}.xcConfirm .popBox {position: fixed;left: 50%;top: 50%;background-color: #ffffff;z-index: 2147000001;width: 570px;height: 300px;margin-left: -285px;margin-top: -150px;border-radius: 5px;/* font-weight: bold; */font-weight: 500;color: #535e66;
}.xcConfirm .popBox .ttBox {height: 30px;line-height: 30px;padding: 14px 30px;border-bottom: solid 1px #eef0f1;
}.xcConfirm .popBox .ttBox .tt {color: #333;font-size: 18px;display: block;float: left;height: 30px;position: relative;
}.xcConfirm .popBox .ttBox .clsBtn {display: block;cursor: pointer;width: 12px;height: 12px;position: absolute;top: 22px;right: 30px;background: url(../img/icons.png) -48px -96px no-repeat;
}.xcConfirm .popBox .txtBox {margin: 20px 60px;height: 120px;overflow: hidden;
}.xcConfirm .popBox .txtBox .bigIcon {float: left;margin-right: 20px;width: 48px;height: 48px;background-image: url(../img/icons.png);background-repeat: no-repeat;background-position: 48px 0;
}.xcConfirm .popBox .txtBox p {height: 100px;font-size:13px;margin-top: 16px;line-height: 26px;overflow-x: hidden;overflow-y: auto;
}.xcConfirm .popBox .txtBox p input {width: 364px;height: 30px;border: solid 1px #eef0f1;font-size: 18px;margin-top: 6px;
}.xcConfirm .popBox .btnArea {border-top: solid 1px #eef0f1;
}.xcConfirm .popBox .btnGroup {float: right;
}.xcConfirm .popBox .btnGroup .sgBtn {margin-top: 14px;margin-right: 40px;
}.xcConfirm .popBox .sgBtn {display: block;cursor: pointer;float: left;width: 95px;height: 35px;line-height: 35px;text-align: center;color: #FFFFFF;border-radius: 5px;
}.xcConfirm .popBox .sgBtn.ok {background-color: #0095d9;color: #FFFFFF;
}.xcConfirm .popBox .sgBtn.cancel {/* background-color: #333;color: #FFFFFF; */background-color: #d2d0d0;color: #333;
}

参考的链接:http://www.jq22.com/jquery-info2351,我对css样式做了一点点改动,显示的效果如下:

Jquery 弹出对话框插件xcConfirm.js相关推荐

simpleAlert.js弹出对话框插件
下载地址 simpleAlert.js是一款弹出对话框插件,实用的alert弹出框插件. dd:
Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...
jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法在页面中引入jBox.all.min.css.jquery和j ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
jquery 弹出对话框
jquery 弹出对话框 https://www.cnblogs.com/tylerdonet/p/4188962.html posted @ 2019-05-13 12:57 李华丽阅读( ... ...
实用的 jquery 弹出窗口插件winbox
实用的 jquery 弹出窗口插件winbox 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 应用演示: ...
jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...
Lightbox弹出层插件：jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...

Jquery 弹出对话框插件xcConfirm.js

Jquery 弹出对话框插件xcConfirm.js相关推荐

最新文章

热门文章