自己写的jquery 弹框插件

Posted 2020-08-03 Turbo12138

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写的jquery 弹框插件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="jquery/jquery-1.8.2.min.js"></script>
    <script src="jquery/yuanBox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/qiyezhan.css">
    <script>
//        $(function () {
//            $(".c").bind("click", function () {
//                $("div").yuanBox("alert",{"title":"点击","sure":"确定","main":"您已经成功！"});
//            });
//        })
//        $(function () {
//            $(".c").bind("click", function () {
//                $("div").yuanBox("confirm",{"title":"点我","sure":"确定","cancel":"取消"});
//            });
//        })
            $(function () {
//                $(".c").bind("click", function () {
                    $("div").yuanBox("prompt",{"name":"点我","num":"账号","password":"密码","submit":"提交","del":"清除"});
//                });
            })
    </script>
    <title></title>
</head>
<body>
    <!--<a href="javascript:;" class="c">click</a>-->
    <div></div>
</body>
</html>

jquery部分（也就是要引入的JS）

/**
 * Created by maker on 2016/6/30.
 */
(function($) {

    var _template = {
        //弹出框模板
        alert : function (data) {
            return ‘<button id="charge">‘ + data.title + ‘</button>‘+ ‘<div id="fade" class="black_overlay">‘+
                ‘</div>‘+
                ‘<div id="MyDiv" class="white_content">‘+
                ‘<p style="padding: 0;margin: 0;height: 40px;line-height: 30px">‘+"提示："+‘<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>‘+
                ‘<div class="inhert">‘+data.main+
                ‘</div>‘+
                ‘<button id="Yes" class="lf-btnR">‘ + data.sure + ‘</button>‘
        },

        //判断框模板
        confirm : function (data) {
            return ‘<button id="charge">‘ + data.title + ‘</button>‘+ ‘<div id="fade" class="black_overlay">‘+
            ‘</div>‘+
            ‘<div id="MyDiv" class="white_content">‘+
            ‘<p style="padding: 0;margin: 0;height: 40px;line-height: 30px">‘+"提示："+‘<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>‘+
            ‘<div class="inhert">‘+
            ‘<div style="width: 20%;float: left;">‘+
            ‘<img style="width: 50px;height: 50px;margin-top: 20px;margin-left: 30px;" src="../judge/images/t0195dc6253b6fa4b54.gif">‘+
            ‘</div>‘+
            ‘<div style="width: 80%;float: left;">‘+
            ‘<p>‘+"你确定删除吗？"+‘</p>‘+
            ‘</div>‘+
            ‘</div>‘+
            ‘<div style="width: 50%;float: left;">‘+
            ‘<button id="Yes" class="lf-btn">‘ + data.sure + ‘</button>‘+
            ‘</div>‘+
            ‘<div style="width: 50%;float: left;">‘+
            ‘<button id="No"  class="rt-btn">‘ + data.cancel + ‘</button>‘+
            ‘</div>‘+
            ‘</div>‘
        },

        //提交框
        prompt : function (data) {
            return ‘<button id="charge">‘+data.name+‘</button><br>‘+ ‘<span>‘+"name:"+‘</span><input class="inside" id="rest"><br>‘+
            ‘<span>‘+"word:"+‘</span><input class="inside" id="rests"><br>‘+
            ‘<span>‘+"hide:"+‘</span><input class="inside" id="hide">‘+
            ‘<div id="fade" class="black_overlay">‘+
            ‘</div>‘+
            ‘<div id="MyDiv" class="white_content">‘+
            ‘<p style="padding: 0;margin: 0;height: 40px;line-height: 30px;font-family: Microsoft YaHei">‘+"提示："+‘<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>‘+
            ‘<div class="inhertR">‘+
            ‘<span class="nu">‘+data.num+"："+‘</span><input class="down" id="name"><br>‘+
            ‘<span class="ma">‘+data.password+"："+‘</span><input class="down" id="word">‘+
            ‘<input class="display-none" value="21212" id="dis">‘+
            ‘</div>‘+
            ‘<div class="modal-footer">‘+
            ‘<button type="button" class="btn" id="btn">‘+data.submit+‘</button>‘+
            ‘<button type="button" class="btn" id="empty">‘+data.del+‘</button>‘+
            ‘</div>‘+
            ‘</div>‘
        }
    }

    //声明方法集合
    var methods = {
        //初始化
        init : function (opt) {},

        //警示框
        /**
         * 点击后弹出
         */
        alert : function (data) {
            var temp = _template.alert(data);
            $(this).html(temp);
            $(document).on("click","#charge", function () {
                document.getElementById("MyDiv").style.display=‘block‘;
                document.getElementById("fade").style.display=‘block‘ ;
            });
            $("#Yes" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
            $("#No" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
            $(".pic" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
        },

        //判断框
        confirm : function (data) {
            var temp = _template.confirm(data);
            $(this).html(temp);
            $(document).on("click","#charge", function () {
                document.getElementById("MyDiv").style.display=‘block‘;
                document.getElementById("fade").style.display=‘block‘ ;
            });
            $("#Yes" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
            $("#No" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
            $(".pic" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
        },

        //提交框
        prompt : function (data) {
            var tem = _template.prompt(data);
            $(this).html(tem);
            $(document).on("click","#charge", function () {
                document.getElementById("MyDiv").style.display=‘block‘;
                document.getElementById("fade").style.display=‘block‘ ;
            });
            $("#btn").bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
                $("#rest")[0].value = $("#name").val();
                $("#rests")[0].value = $("#word").val();
                $("#hide")[0].value = $("#dis").val();
                document.getElementById("name").value = "";
                document.getElementById("word").value = "";
                document.getElementById("dis").value = "";

            })
            $("#empty").bind("click", function () {
                document.getElementById("name").value = "";
                document.getElementById("word").value = "";
                document.getElementById("dis").value = "";
            })
            $(".pic" ).bind("click", function () {
                document.getElementById("MyDiv").style.display=‘none‘;
                document.getElementById("fade").style.display=‘none‘;
            })
        }
    }



    $.fn.yuanBox = function (method) {

        if(methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }else if(typeof(method) === ‘object‘ || !method) {
            return methods.init.apply(this, arguments);
        }else{
            $.error(‘Method ‘ + method + ‘ does not exist in this project‘);
        }
    }
})(jQuery);

CSS部分

@charset "utf-8";
/* CSS Document */

.main{width:100%;}
.heading{width:100%;height:40px;background: #3c3c3c}
.head{margin:0 auto;height:40px;width:1170px;background: #3c3c3c}
.zuo{width:200px;height:40px;float:left;}
.you{width:400px;height:40px; overflow:hidden;float:right;}
.top{width:100%;height:90px;background:ghostwhite}
.logo{width:1170px;height:90px;margin:0 auto;}
.logo-tu{width:200px;height:70px;float:left;background:url(../images/logo.png) no-repeat;margin-top: 10px}
.logo-yu{width:370px;height:70px;float:left;}
.inp{width:600px;height:70px;float:left;}
.zhong{width:100%;height:80px;}
.wir{width:1170px;height:80px;margin:0 auto;}
.shang{height:80px;}
.shang-zuo{width:900px;height:200px;float:left;}
.shang-you{width:270px;height:200px;float:right;}
.xiashang{width:100%;heigt:40px;}
.xiashang-1{width:1170px;height:40px;margin:0 auto;}
.xiaxia{width:100%;height:400px;}
.xiaxia-1{width:1170px;height:400px;margin:0 auto;overflow: hidden}
.logo-yu p{text-align: center;line-height: 90px;font-size: 30px;font-family: ‘微软雅黑‘, ‘宋体‘;color: #2d64b3;margin-bottom: 0;}
.zuo p{text-align: left;line-height: 40px;margin-bottom: 0;}
.zuo p a{;text-decoration:none;color: #ffffff}
.you ul{;padding-left: 0px;float: right;margin: 0}
.you ul li{list-style-type:none;float: left;color: #ffffff;margin-left: 10px;line-height: 40px;font-size: 12px}
.you ul li a{text-decoration:none; font-size: 12px;color: #ffffff}
.search{ padding:4px;background:#ffffff;width: 400px;float: right;margin-top: 25px;border: 1px solid  #BBB;height: 42px;}
.search-1{width: 360px;height: 32px;border: none}
.search-2{ height: 24px;cursor: pointer;
    border: 0;
    margin: 4px 0 0 4px;width: 24px;;float: right; border:none; display: block; background: #fff url(../css/bs.png) no-repeat center 0px;}
.search-2:hover{ background: #fff url(../css/bs.png) no-repeat 0 -24px;}
.select{float: right;height: 42px;margin-top: 15px;width: 55px}
.middle{width: 800px;height: 200px;;margin: 0 auto;}
.in{width: 350px;height: 40px;margin-top: 20px; }
.shang span{font-family: 黑体;font-size: 20px;color: #2d64b3;margin-top: 10px}
.list{width: 1170px;height: 400px;}
.list-style{  padding-top: 15px;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fcfcfc), color-stop(1, #ececec));
    width:25%;
    height: 80px;
    background-color: #ececec;
    border-radius: 8px;
    display: block;
    /*font-size: 25px;*/
    /*color:cyan;*/
    overflow: hidden;
    float: left;}
.p1{ color:#08c;
    font-size: 20px;
   padding-left: 30px;
   margin: 0}
.but{width: 100px;height: 40px;margin-left: 100px;margin-top: 10px;background:ghostwhite }
.list-style p span:hover{
    color: #005580;
}
.list-style p{height: 30px;line-height: 30px;margin: 0}
.p1:hover{
    color: #005580;
}
.but-1{width: 100px;height: 40px;margin-top: 20px;background:ghostwhite}
.list-style p span{float: right;margin-right: 10px;text-decoration:none;cursor: pointer;color:#08c ;font-size: 6px;}
.bott{width:100%;height:70px;}
.bott-page{width:1170px;height:70px;margin:0 auto;margin-top: 20px}
.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.40;
    filter: alpha(opacity=80);
}
/*.white_content {*/
    /*background: url("../images/bg.jpg")repeat-x;*/
    /*display: none;*/
    /*position: absolute;*/
    /*top:30%;*/
    /*left: 36%;*/
    /*width: 25%;*/
    /*height: 25%;*/
    /*border: 5px solid lightblue;*/
    /*background-color: white;*/
    /*z-index:1002;*/
    /*overflow: auto;*/
/*}*/
.white_content {
    margin: 0 auto;
    background: url("../images/bg.jpg")repeat-x;
    display: none;
    position: absolute;
    top:30%;
    left: 40%;
    width: 260px;
    height: 180px;
    border: 5px solid lightblue;
    background-color: white;
    z-index:1002;
    /*overflow: auto;*/
}
.pic{cursor: pointer;width: 25px;height: 25px;float: right;  float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;background: no-repeat;border: none}
.white_content p{padding:20px 0 0 40px}
.a{;font-size: 25px;font-family: 黑体;cursor: pointer;margin-left: 90px;}
.a:hover{color: red}
.bt{float: right;margin-top: -25px;margin-right: 70px}
.divide-1{width: 460px;height: 80px;line-height: 40px;float: left}
.divide-2{;height: 80px;float: left}
#help{
    width:50px;
    height:30px;
    cursor: pointer;
    color: red;
    /*position:fixed;*/
    /*left:60px;*/
    /*bottom:100px;*/
}
.details{width: 254px;height:90px ;text-indent:2em;}
.inhert{
    width: 100%;height: 50%;border-bottom: 1px solid #dcdcdc;text-align: center;line-height: 90px;
}
.inhertR{
    width: 100%;height: 50%;border-bottom: 1px solid #dcdcdc
}
.btn{float: right;margin-top:15px;margin-right: 8px;border-radius: 2px;border: none;background:#f5f5f5;cursor: pointer;font-size: 14px;font-family: ‘微软雅黑‘}
.display-none{display: none}
.down{margin-top: 10px;border: none}
.nu{margin-left: 20px;font-size: 14px;font-family: ‘微软雅黑‘}
.ma{margin-left: 20px;font-size: 14px;font-family: ‘微软雅黑‘}
.lf-btnR{float: right;margin-right: 20px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}
.lf-btn{float: right;margin-right: 40px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}
.rt-btn{margin-left: 40px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}

以上是关于自己写的jquery 弹框插件的主要内容，如果未能解决你的问题，请参考以下文章

JQuery做的登录按钮，其他网页如何调用？

自己在项目中写的一个Jquery插件和Jquery tab 功能

自己封装一个弹框插件

08.01《jQuery》——cookie插件的简单应用和自己写的简单更换颜色插件

Java技术jQuery自定义插件开发实践

Thinkphp5结合layer弹框插件修改默认的提示信息