Introduce ready-to-use jQuery pop-up box beautification plugin

[TOC]
The xcConfirm plugin is a beautified popup plugin, and the title text of the popup can be customized. It can be used directly by introducing js and css files, which is easy to use.
Source code , demo effect

Introduce 2 js and a css, pay attention to the pictures in the source code.

<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>

The syntax is as follows:

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

Parameter 1, pomHtml: that is, the pop-up content, which can be plain text or html elements. Such as " 弹出内容" or <h1>弹出内容</h1>
parameter 2, type: a total of 8 kinds of contents,
1. Information pop-up box: window.wxc.xcConfirm.typeEnum.infoor info
write picture description here
2. Confirmation pop-up box: window.wxc.xcConfirm.typeEnum.confirmor confirm

3. Warning pop-up box: window.wxc.xcConfirm.typeEnum.warningor warning

4. Error pop-up box: window.wxc.xcConfirm.typeEnum.erroror error

5. Success pop-up box: window.wxc.xcConfirm.typeEnum.successor success
write picture description here
6. Input popup: window.wxc.xcConfirm.typeEnum.inputor input

7. Custom popup: window.wxc.xcConfirm.typeEnum.customor custom

8. Default popup has no type. This style is too ugly, don't use it.

Parameter three, options configuration parameters:
title: title of popup box
btn: button group
parseInt("0001",2), //OK button
parseInt("0010",2), //Cancel button
parseInt("0011",2 ) //OK && cancel
onOk: Click the OK button to call back
onCancel: Click the cancel button to call back
onClose: The pop-up window closes the callback, and returns the trigger event
icon: icon

example:

<!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>

Introduce ready-to-use jQuery pop-up box beautification plugin

Guess you like