自己写的jquery 弹框插件

html部分

<!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")[].value = $("#name").val();

                $("#rests")[].value = $("#word").val();

                $("#hide")[].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, ));

        }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:%;}

.heading{width:%;height:40px;background: #3c3c3c}

.head{margin: 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:%;height:90px;background:ghostwhite}

.logo{width:1170px;height:90px;margin: 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:%;height:80px;}

.wir{width:1170px;height:80px;margin: auto;}

.shang{height:80px;}

.shang-zuo{width:900px;height:200px;float:left;}

.shang-you{width:270px;height:200px;float:right;}

.xiashang{width:%;heigt:40px;}

.xiashang-{width:1170px;height:40px;margin: auto;}

.xiaxia{width:%;height:400px;}

.xiaxia-{width:1170px;height:400px;margin: auto;overflow: hidden}

.logo-yu p{text-align: center;line-height: 90px;font-size: 30px;font-family: '微软雅黑', '宋体';color: #2d64b3;margin-bottom: ;}

.zuo p{text-align: left;line-height: 40px;margin-bottom: ;}

.zuo p a{;text-decoration:none;color: #ffffff}

.you ul{;padding-left: 0px;float: right;margin: }

.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-{width: 360px;height: 32px;border: none}

.search-{ height: 24px;cursor: pointer;

    border: ;

    margin: 4px   4px;width: 24px;;float: right; border:none; display: block; background: #fff url(../css/bs.png) no-repeat center 0px;}

.search-:hover{ background: #fff url(../css/bs.png) no-repeat  -24px;}

.select{float: right;height: 42px;margin-top: 15px;width: 55px}

.middle{width: 800px;height: 200px;;margin:  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,  ,  %, color-stop(, #fcfcfc), color-stop(, #ececec));

    width:%;

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

.but{width: 100px;height: 40px;margin-left: 100px;margin-top: 10px;background:ghostwhite }

.list-style p span:hover{

    color: #;

}

.list-style p{height: 30px;line-height: 30px;margin: }

.p1:hover{

    color: #;

}

.but-{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:%;height:70px;}

.bott-page{width:1170px;height:70px;margin: auto;margin-top: 20px}

.black_overlay{

    display: none;

    position: absolute;

    top: %;

    left: %;

    width: %;

    height: %;

    background-color: black;

    z-index:;

    -moz-opacity: 0.8;

    opacity:.;

    filter: alpha(opacity=);

}

/*.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:  auto;

    background: url("../images/bg.jpg")repeat-x;

    display: none;

    position: absolute;

    top:%;

    left: %;

    width: 260px;

    height: 180px;

    border: 5px solid lightblue;

    background-color: white;

    z-index:;

    /*overflow: auto;*/

}

.pic{cursor: pointer;width: 25px;height: 25px;float: right;  float: right;

    font-size: 21px;

    font-weight: ;

    line-height: ;

    color: #;

    text-shadow:  1px  #fff;background: no-repeat;border: none}

.white_content p{padding:20px   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-{width: 460px;height: 80px;line-height: 40px;float: left}

.divide-{;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: %;height: %;border-bottom: 1px solid #dcdcdc;text-align: center;line-height: 90px;

}

.inhertR{

    width: %;height: %;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 弹框插件的更多相关文章

自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
用jQuery写了一个模态框插件
用jQuery写了一个模态框插件大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
vue项目中使用vue-layer弹框插件
vue-layer弹框插件安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...
[原]发布一个jQuery提示框插件，Github开源附主站，jquery.tooltips.js
一个简单精致的jQuery带箭头提示框插件插件写好快一年了,和一个弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的 ...
弹框插件self(动效兼容到IE9，功能兼容IE6)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
jquery Dialog弹框插件
function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...
jquery Dialog弹框插件使用
var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...
亲手用模块化方式写一个jquery QQ表情插件。
在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...
SweetAlert插件弹框插件
sweetalert是一个漂亮的弹窗中文网址: http://mishengqiang.com/sweetalert/ 它需要2个文件:sweetalert-dev.js和sweetalert.cs ...

随机推荐

从Bayesian角度浅析Batch Normalization
前置阅读:http://blog.csdn.net/happynear/article/details/44238541——Batch Norm阅读笔记与实现前置阅读:http://www.zhih ...
【BZOJ1503】[HAOI2007]反素数ant 搜索
结论题...网上讲的好的很多... #include <iostream> using namespace std; ]={,,,,,,,,,},num=; long long ans,n ...
this, 你到底指向谁?
JS中, this的值到底是什么? 几个月之前, 拜读了<javascript语言精髓>, 里面对于这个问题, 做出了很好的解释... JS中, this的值取决于调用的模式, 而JS中共 ...
JavaScript模拟鼠标右键菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Linux:使用nohup让进程在后台可靠运行
学习之余我最大的乐趣是找一部不错的电影慢慢品味,这也是我缓解压力的最好方式之一,由于我常去的字幕组网站需要签到才可以下载字幕,像这种娱乐网站谁有时间天天记得去签到呢,but作为一个准程序猿应该有更好的 ...
在Unity中使用TDD - 初探
描述 Editor Tests Runner是Unity中用来实现TDD的,其内部实现是基于NUnit. 其他测试脚本要放在Editor文件夹中,测试要能够在一帧的时间内完成. 使用打开Edito ...
hdu 4898 The Revenge of the Princess’ Knight
传送阵:http://acm.hdu.edu.cn/showproblem.php?pid=4898 题目大意:一个首尾相连的字符串,将其分为k个子串,使得最大的字串最小将所有子串排序,输出第k小即 ...
【转发】关于Java性能的9个谬论
转载请注明出处,感谢大家的支持!本文来自优优码:http://www.uucode.net/201502/9%e4%b8%aa%e8%b0%ac%e8%ae%ba Java的性能有某种黑魔法之称.部分 ...
spring装配---处理自动装配的歧义性
一.歧义性当我们使用spring的注解进行自动装配bean时,如果不仅有一个bean能够匹配结果的话,会抛出NoUniqueBeanDefinitionException: 例如本例中当sprin ...
SqlServer 笔记二获取汉字的拼音首字母
一.该函数传入字符串,返回数据为:如果为汉字字符,返回该字符的首字母,如果为非汉字字符,则返回本身. 二.用到的知识点:汉字对应的UNICODE值,汉字的排序规则. 三.数据库函数: )) ) AS ...

自己写的jquery 弹框插件

自己写的jquery 弹框插件的更多相关文章

随机推荐

热门专题