类似于alert提示框的优化插件
最近开发过程中需要用到一个能够复制文本内容的提示框，其实alert()方法的内容是可以复制的：把鼠标点击在alert框上并按下Ctrl+C就复制成功了，只是效果十分不明显，所以找了一款不错的插件，其能够美观地表达info,success,error,confirm,warning,input(prompt),custom(自定义)等提示框。详细地址可以参考http://www.jq22.com/jquery-info2351，在此记录一下方便自己以后使用。
首先把压缩包下载下来，为了方便表示我把所有的文件都放在一个文件夹并命名为xcConfirm如图所示：
其中icons.png为图标图片，在使用不同类型的方法时会调用不同的icon，而且在xcConfirm.css里会引用到该文件，所以要选对其正确的项目路径的icon图如下：
xcComfirm.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: #666666;
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;
color: #535e66;
}
.xcConfirm .popBox .ttBox
{
height: 30px;
line-height: 30px;
padding: 14px 30px;
border-bottom: solid 1px #eef0f1;
}
.xcConfirm .popBox .ttBox .tt
{
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(./icons.png) -48px -96px no-repeat;
}
.xcConfirm .popBox .txtBox
{
margin: 40px 100px;
height: 100px;
overflow: hidden;
}
.xcConfirm .popBox .txtBox .bigIcon
{
float: left;
margin-right: 20px;
width: 48px;
height: 48px;
/*根据图片位置改变引用路径*/
background-image: url(./icons.png);
background-repeat: no-repeat;
background-position: 48px 0;
}
.xcConfirm .popBox .txtBox p
{
height: 84px;
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: 10px;
}
.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: #546a79;
color: #FFFFFF;
}
xcConfirm.js则包含了封装好的方法，引用即可：
(function($){
window.wxc = window.wxc || {};
/*
* 使用说明:
* 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:"自定义"})
*/
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",//蓝色i
btn: 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);//弹窗文本dom
var $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(){
//处理特殊类型input
if(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);
else
config.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);
最后在我们的index.html测试页面引入上述的css文件，js文件以及jquery文件即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!--引入xcConfirm.css-->
<link rel="stylesheet" type="text/css" href="./xcConfirm.css"/>
<!--引入JQuery-->
<script src="./jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--引入xcConfirm.js-->
<script src="./xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<!--页面8个按钮的样式-->
<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>
<!--8个按钮绑定点击事件-->
<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>
<!--8个按钮-->
<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>
最后打开index.html长成这样：
随便点击一个按钮：
OK，其实最核心的就是方法就是使用window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info)来代替alert()或者confirm()或者prompt(),其次重写了onOk():function(v){}方法，而且可以在css里改变整个框的位置以及样式，终于不用alert()，confirm(),prompt(),Nice!
