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

迷南。 2022-05-28 08:41 272阅读 0赞

\[TOC\]  
xcConfirm插件是一个美化版弹框插件，弹框的标题文本可以自定义。引入js和css文件即可直接使用,使用简单。  
[源码][Link 1]，[演示效果][Link 2]

--------------------

引入2个js和一个css，注意还有源码里的图片.

--------------------

语法如下：

window.wxc.xcConfirm(popHtml, type, options);

参数一、pomHtml：即是弹出的内容，可以是纯文本，也可以是html元素。如“`弹出内容`”或`<h1>弹出内容</h1>`  
参数二、type:总共8种内容，  
1. 信息弹出框：`window.wxc.xcConfirm.typeEnum.info`或`info`  
![这里写图片描述][70]  
2. 确认弹出框：`window.wxc.xcConfirm.typeEnum.confirm`或`confirm`  
![这里写图片描述][70 1]  
3.警告弹出框：`window.wxc.xcConfirm.typeEnum.warning`或`warning`  
![这里写图片描述][70 2]  
4.错误弹出框： `window.wxc.xcConfirm.typeEnum.error`或`error`  
![这里写图片描述][70 3]  
5.成功弹出框：`window.wxc.xcConfirm.typeEnum.success`或`success`  
![这里写图片描述][70 4]  
6.输入弹出框：`window.wxc.xcConfirm.typeEnum.input`或`input`  
![这里写图片描述][70 5]  
7.自定义弹出框：`window.wxc.xcConfirm.typeEnum.custom`或`custom`  
![这里写图片描述][70 6]  
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>

[Link 1]: https://gitee.com/chenyuan122912/xcConfirm-js.git
[Link 2]: http://www.jq22.com/yanshi2351
[70]: /images/20220528/577078c7248b47b8b76d0df08012b01d.png
[70 1]: /images/20220528/55917bafccca4d59ad881afcd46ac6c6.png
[70 2]: /images/20220528/41836be53f2e47d6a776a820c0f2977c.png
[70 3]: /images/20220528/0eddd6eade5e403b8cfe6c9d84f2422f.png
[70 4]: /images/20220528/1e66be30472b410cb69aa72907569504.png
[70 5]: /images/20220528/2c1cf6a7e96f42678e964bd9c5566f84.png
[70 6]: /images/20220528/84db17f89dde474a8099c960fb6f3896.png