[TOC]
xcConfirm插件是一个美化版弹框插件,弹框的标题文本可以自定义。引入js和css文件即可直接使用,使用简单。
源码,演示效果
引入2个js和一个css,注意还有源码里的图片.
<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>
语法如下:
window.wxc.xcConfirm(popHtml, type, options);
参数一、pomHtml:即是弹出的内容,可以是纯文本,也可以是html元素。如“弹出内容
”或<h1>弹出内容</h1>
参数二、type:总共8种内容,
1. 信息弹出框:window.wxc.xcConfirm.typeEnum.info
或info
2. 确认弹出框:window.wxc.xcConfirm.typeEnum.confirm
或confirm
3.警告弹出框:window.wxc.xcConfirm.typeEnum.warning
或warning
4.错误弹出框:window.wxc.xcConfirm.typeEnum.error
或error
5.成功弹出框:window.wxc.xcConfirm.typeEnum.success
或success
6.输入弹出框:window.wxc.xcConfirm.typeEnum.input
或input
7.自定义弹出框:window.wxc.xcConfirm.typeEnum.custom
或custom
8.默认弹出框无类型。这个样式太丑,不用。
参数三、options配置参数:
title:弹出框标题
btn:按钮组
parseInt(“0001”,2), //确定按钮
parseInt(“0010”,2), //取消按钮
parseInt(“0011”,2) //确定&&取消
onOk: 点击确定的按钮回调
onCancel:点击取消的按钮回调
onClose:弹窗关闭的回调,返回触发事件
icon:图标
例子:
<!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><script type="text/javascript">$(function(){$("#btn1").click(function(){var txt= "<h1>提示文字<h1>";window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info, {title:"test"});});$("#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>