自己写的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 ...

随机推荐

CAS代理配置
CAS Server:www.sinosoft.com 代理服务:palace.sinosoft.com 被代理服务:gguser.sinosoft.com 1. 建立key,命令如下: keytoo ...
event
当一个事件被调用后,它会收到一个参数,第一个参数就是事件对象,事件对象包含type, target, timestamp三个. 类型:事件的名称,例如:点击目标:事件的目标元素时间戳:事件触发的时间
使用express-generator初始化你的项目目录
express 4.x以后将express命令独立到 express-generator包中,所以想使用express初始化项目目录,可以npm install express-genrator ...
后台发送POST,DELETE,GET,PUT请求
public static HttpWebResponse CreatePostHttpResponse(string url, IDictionary<string, int> para ...
2016年终分析（传统开发与网络时代的Java开发）
2016重大事件:(在此将2016年的开发称为传统开发) 1.乌镇互联网大会大会(大数据&云计算) 2.某东struts2安全漏洞 3.作为一个程序呀对于淘宝双11和双12的分析应该是最好的案 ...
finally类
finally叫做最后的执行快,什么是最后的执行快?他的意思是这样的他是写在try catch 的后面但是只能写一个,他设计这个finally的意思就是,如果try里面出错肯定会往陷阱里面跑.没有 ...
一篇UI规范文件
一篇UI规范文件这是一个UI模板规范,在做B/S版应用程序时比较适用,其实这样的东西算不上什么正规的规范,只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力,和解决了一些与程序沟通和接口 ...
js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
对Git的理解
GIT属于计算机软件,功能是分布式版本控制系统,字面意思还挺有意思的:愚蠢或不开心的人,首先呢,这款软件是免费的.这款软件是免费的.这款软件是免费的.(重要的地方要说三遍)即使它不是免费的,在我大天朝 ...
.NET中MemCached使用介绍
阅读目录 1.MemCached是什么? 2.Window中MemCached安装 3.MemCached命令 4.简单示例 MemCached是什么 MemCached是一个自由开源,高性能,分布式 ...

自己写的jquery 弹框插件

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

随机推荐

热门专题