700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 引入即可使用的jQuery弹出框美化插件

引入即可使用的jQuery弹出框美化插件

时间:2020-12-07 11:10:22

相关推荐

引入即可使用的jQuery弹出框美化插件

[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.infoinfo

2. 确认弹出框:window.wxc.xcConfirm.typeEnum.confirmconfirm

3.警告弹出框:window.wxc.xcConfirm.typeEnum.warningwarning

4.错误弹出框:window.wxc.xcConfirm.typeEnum.errorerror

5.成功弹出框:window.wxc.xcConfirm.typeEnum.successsuccess

6.输入弹出框:window.wxc.xcConfirm.typeEnum.inputinput

7.自定义弹出框:window.wxc.xcConfirm.typeEnum.customcustom

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。