jQuery版min提示框与确认框+警告框

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
                var Util = {};

Util.minTips = (function () {
                                var type = {        //图标样式
                                        "info" : "",
                                        "err" : "",
                                        "suc" : ""
                                }, tipsDom, timr;
                                return {
                                        //显示min
                                        alertShow:function (opt) {
                                                if(!tipsDom) {
                                                        this.addAlert(opt);
                                                }
                                                else {
                                                        tipsDom.show();
                                                }
                                                this.setAlert(opt);
                                                timr = setTimeout(function () {
                                                        tipsDom.hide();
                                                },opt.time||2000);
                                        },
                                        //隐藏min
                                        alertHide:function () {
                                                timr&&clearTimeout(timr);
                                                tipsDom.hide();
                                        },
                                        //基础UI
                                        addAlert:function () {
                                                tipsDom = $('<div style="width:200px;height:100px;background-color:#f00;position:absolute;z-index:10000001"><i rel="ico"></i><span rel="content"></span></div>');
                                                $(document.body).append(tipsDom);
                                        },
                                        //配置UI
                                        setAlert:function (opt) {
                                                var wbody = $(window).width();
                                                var hbody = $(window).height();
                                                tipsDom.find("[rel='ico']").attr("class",type[opt.type] || type["info"]);
                                                tipsDom.find("[rel='content']").html(opt.content);
                                                tipsDom.css({"left":(wbody-tipsDom.width())/2,"top":(hbody-tipsDom.height())/2});
                                        }
                                }
                        })();

Util.Confims = (function (){
                                var type = {
                                        "info" : "",
                                        "err" : "",
                                        "suc" : ""
                                }, confimDom, bgDom;
                                return {
                                        //确认框
                                        confimShow:function (opt) {
                                                if(!confimDom) {
                                                        this.addConfimBg();
                                                        this.addConfim();
                                                        confimDom.on("click","[btn]",function () {
                                                                var blo = false;
                                                                if($(this).attr("btn") == "confirm") blo = true;
                                                                opt.callback&&opt.callback(blo);
                                                                confimDom.add(bgDom).hide();
                                                        });
                                                }
                                                else {
                                                        confimDom.add(bgDom).show();        
                                                };
                                                this.setConfim(opt);
                                                confimDom.find("[btn='cancel']").show();
                                        },
                                        //警告框
                                        confimAlert:function (opt) {
                                                this.confimShow.call(this,opt);
                                                confimDom.find("[btn='cancel']").hide();
                                        },
                                        //背景
                                        addConfimBg:function () {
                                                bgDom = $('<div style="position:absolute;z-index:9999998;background:#000;left:0;top:0;"></div>');
                                                bgDom.width($(window).width()).height($(window).height()).css({"opacity":0.8});
                                        },
                                        //基础UI
                                        addConfim:function () {
                                                confimDom = $('<div style="position:absolute;z-index:9999999;background:#f00;width:300px;height:200px;">'+
                                                                                '<h3 rel="title"><i rel="ico"></i>提示信息</h3>'+
                                                                    '<div rel="content"></div>'+
                                                                    '<div>'+
                                                                            '<a href="javascript:;" btn="confirm">确定</a>'+
                                                                            '<a href="javascript:;" btn="cancel">取消</a>'+
                                                                    '</div>'+
                                                            '<div>');
                                    $(document.body).append(bgDom);
                                                $(document.body).append(confimDom);
                                        },
                                        //配置UI
                                        setConfim:function (opt) {
                                                var wbody = $(window).width();
                                                var hbody = $(window).height();
                                                confimDom.find("[btn='confirm']").text(opt.confirm_text||"确定");
                                                confimDom.find("[btn='cancel']").text(opt.claer_text||"取消");
                                                confimDom.find("[rel='title']").text(opt.title||"提示信息");
                                                confimDom.find("[rel='content']").html(opt.content||"");
                                                confimDom.find("[rel='ico']").attr("class",type[opt.type]||type["info"]);
                                                confimDom.css({"left":(wbody-confimDom.width())/2,"top":(hbody-confimDom.height())/2});
                                        }
                                }
                        })();
        </script>
    </head>
    <body style="height:300px;">
        <button id="jsshow">点击显示</button> <button id="jshide">隐藏min</button> <button id="jsshow2">警告提示框</button> <button id="jsshow3">确认提示框</button>
        <script type="text/javascript">
                $(function () {
                        $("#jsshow").on("click",function () {
                                /*
                                                @type 图标样式 
                                                @content "正文内容" html
                                                @time 时间
                                */
                                Util.minTips.alertShow({type:"info",content:"文字说明",time:1000});
                        })
                        $("#jsshow2").on("click",function () {
                                /*
                                                @type 图标样式 
                                                @title  标题 text
                                                @content "正文内容" html
                                                @confirm_text 确定 按钮文字 text
                                                @claer_text        取消        按钮文字 text
                                */
                                Util.Confims.confimAlert({"type":"err","content":"文字说明2222","title":"警告框","callback":function(blo){alert(blo)}});
                        })
                        $("#jsshow3").on("click",function () {
                                Util.Confims.confimShow({"type":"err","content":"333","claer_text":"死开","callback":function(blo){alert(blo)}});
                        })
                        $("#jshide").on("click",function () {
                                Util.minTips.alertHide();
                        })
                })
        </script>
    </body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery版min提示框与确认框+警告框

分类

表格图层

描述

min提示与确认框+警告框，基于jQuery代码实现，网页上的提示框，确认框等插件，送给大家，我觉得很不错哦。