弹出框插件

下的插件从http://www.hehaibao.com/jquery-css3-plugin/网址上下的。

在测试插件之前，看看自定义的普通的弹出框。

样式：

        /* MASK --------------- */
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            color: #333;
            font-size: 12px;
            font-family: "Microsoft YaHei";
            list-style-type: none;
        }

        h1 {
            display: block;
            font-size: 2em;
            font-weight: bold;
        }

        a {
            text-decoration: none;
        }

        .mask {
             100%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 9;
            background: url(black-66.png);
        }

            .mask .title {
                 100%;
                height: 42px;
                float: left;
                background: #118BEA;
            }

                .mask .title h1 {
                    height: 42px;
                    float: left;
                    line-height: 42px;
                    color: #FFF;
                    padding: 0 0 0 15px;
                    font-size: 16px;
                }

                .mask .title a {
                    height: 16px;
                    float: right;
                    line-height: 16px;
                    color: #FFF;
                    padding: 0 15px;
                    margin: 13px 0;
                    border-left: 1px dashed #E3E3E3;
                }


        /* 任课信息设置 -------------------- */
        .teach {
             500px;
            height: 418px;
            float: left;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -209px 0 0 -250px;
            background: #FFF;
        }

        /* 选择备课老师 --------------- */
        .teacher {
             500px;
            height: 305px;
            float: left;
            overflow: hidden;
            overflow-y: auto;
        }

            .teacher input {
                 13px;
                height: 13px;
                float: left;
                margin: 3px 0 3px 10px;
            }

            .teacher label {
                height: 19px;
                float: left;
                line-height: 19px;
                padding: 0 0 0 10px;
            }

            .teacher ul {
                 470px;
                float: left;
                padding: 10px 15px;
            }

                .teacher ul li {
                     33.333%;
                    height: 19px;
                    float: left;
                    padding: 10px 0; /*border-bottom:1px dashed #E7E7E7;*/
                }

                    .teacher ul li:hover {
                        background: #F3F3F3;
                    }

        .mask .submit {
             100%;
            height: 70px;
            float: left;
            background: #F9F9F9;
            border-top: 1px dashed #DFDFDF;
        }

        .mask .submit-main {
            height: 36px;
            float: right;
            padding: 13px 15px 0 0;
        }

            .mask .submit-main a {
                height: 34px;
                float: left;
                font-size: 14px;
                color: #FFF;
                border-radius: 1px;
                line-height: 34px;
                padding: 0 20px;
                margin: 0 0 0 10px;
            }

                .mask .submit-main a.reset {
                    background: #00BAAB;
                }

                .mask .submit-main a.cancel {
                    background: #C5C5C5;
                }

                .mask .submit-main a.search {
                    background: #118BEA;
                    padding: 0 25px;
                }

                .mask .submit-main a:hover {
                    background: #488ABC;
                    text-decoration: none;
                }

   <div>
            <a class="push color03" href="javascript:showDiv('public01');"><i class="iconfont">&#xe640;</i><em>添加老师</em></a>
        </div>

        <!-- 选择集体备课老师 -->
        <div id="public01" class="mask" style="display: none;">
            <div class="teach">
                <div class="title">
                    <h1>标题</h1>
                    <a onclick="closeDiv();" href="javascript:void(0);">关闭</a>
                </div>
                <div class="teacher">
                    <ul>
                        <li>
                            <label>
                                <input type="radio" />数据1</label></li>
                        <li>
                            <label>
                                <input type="radio" />数据2</label></li>
                        <li>
                            <label>
                                <input type="radio" />数据3</label></li>
                        <li>
                            <label>
                                <input type="radio" />数据4</label></li>
                        <li>
                            <label>
                                <input type="radio" />数据5</label></li>
                        <li>
                            <label>
                                <input type="radio" />数据6</label></li>
                    </ul>
                </div>

                <div class="submit">
                    <div class="submit-main">
                        <a class="search" href="">确定选择</a>
                        <a class="cancel" href="javascript:void(0);" onclick="closeDiv();">取消</a>
                    </div>
                </div>

            </div>
        </div>
        <script src="../js/jquery-1.11.0.min.js"></script>
       
        <script type="text/javascript">
            function closeDiv() {
                //可以清空数据
                document.getElementById('public01').style.display = "none";
            }
            function showDiv(divid) {
                //可以根据传递的值去获取数据，然后填充数据
                document.getElementById('public01').style.display = "none";
                document.getElementById(divid).style.display = "block";
            }
        </script>

原理很简单：只需要在弹出框的最外层加一个div,把背景设置成接近透明，宽和高都是100%，你在根据自己的要求可以设置样式，很容易生成了弹出框。

上面的列子就是那样做的，设置好了样式就OK了。

接着介绍这个插件，你可以下载列子去看，还很多的。这边主要记录一下弹出加载数据，消失就把数据清空。原理懂了，对于同样子的就很容易了。

先需要引入CSS,和JS

  弹出框样式

        <!-- 注意：请将要放入弹框的内容放在比如id="HBox"的容器中，然后将box的值换成该ID即可，比如：$(element).hDialog({'box':'#HBox'}); -->
        <div id="HBox" data-type="0">        
                <ul class="list">
                    <li>
                        <strong>昵 称  <font color="#ff0000">*</font></strong>
                        <div class="fl"><input type="text" name="nickname" value="" required class="ipt nickname" /></div>
                    </li>
                    <li>
                        <strong>手 机 <font color="#ff0000">*</font></strong>
                        <div class="fl"><input type="text" name="phone" value="18999" required class="ipt phone" /></div>
                    </li>
                    <li>
                        <strong>邮 箱 <font color="#ff0000">*</font></strong>
                        <div class="fl"><input type="text" name="email" value="" required class="ipt email" /></div>
                    </li>
                    <li>
                        <strong>性 别 <font color="#ff0000">&nbsp;</font></strong>
                        <div class="fl">
                            <label class="mr10"><input type="radio" name="sex" value="1"/>男</label>
                            <label class="mr10"><input type="radio" name="sex" value="2"/>女</label>
                            <label><input type="radio" name="sex" value="3"/>保密</label>
                        </div>
                    </li>
                    <li>
                        <strong>爱 好 <font color="#ff0000">&nbsp;</font></strong>
                        <div class="fl">
                            <label class="mr10"><input type="checkbox" name="like" value="男" />男</label>
                            <label class="mr10"><input type="checkbox" name="like" value="女"/>女</label>
                            <label><input type="checkbox" name="like" value="都喜欢"/>都喜欢</label>
                        </div>
                    </li>
                    <li><input type="submit" value="确认提交" class="submitBtn" /></li>
                </ul>        
        </div><!-- HBox end -->    

测试按钮

 <div class="test" data-one="1" style="100px;height:100px;margin-bottom:20px">
            修改
    </div>
   <div class="test"  style="100px;height:100px;margin-bottom:20px">
            添加
    </div>
         <div id="clo"  style="100px;height:100px;margin-bottom:500px;">
            关闭
    </div>

   //点击获取数据然后显示
            $(".test").click(function () {
                var dd = $(this).attr("data-one");
                console.log(dd);
                if (dd!="undefined") {
                    $("#HBox").attr("data-type",dd);
                }
                $.ajax({
                    type: "Post",
                    url: "Test.ashx",
                    data: "type=" +    $("#HBox").attr("data-type"),
                    dataType: "Json",
                    async: false,
                    success: function (data) {
                        console.log(data + "," + typeof (data));
                        //可以在这里赋值  也可以在弹出框之前的回调函数里面写都行
                        $(".nickname").val(data);
                        $("#HBox").hDialog({
                             afterHide: testAfter, autoShow: true
                        });
                    },
                    error: function (e) {
                        alert("失败");
                    }
                })
            });

   //弹出框消失之后的事件
            function testAfter() {
                //清空数据
                $(".nickname").val("");
                $(".phone").val("");
                $("#HBox").attr("data-type", "0");
            };

   //保存数据
            $(".submitBtn").click(function () {
                var test = $("#HBox").attr("data-type");
                //还是可以调用一般处理程序，把需要的数据生成对象，转成Json传过去，然后在进行处理
              //是修改还是添加，这里是需要判断的，
                if (test==="0") {
                    alert("添加");    
                } else {
                    alert("修改");
                }
            });

 //手动关闭
            $("#clo").click(function () {
                $("#HBox").hDialog({ hideTime:0})
            })

逻辑处理的地方就是一般处理程序了

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string id = context.Request.Form["type"]==null?"":context.Request.Form["type"].ToString();
            if (id!="0")
            {
               // Random ran = new Random();
                context.Response.Write(""修改"");     //可以传主键ID，获取数据
            }
            else
            {
                //Random ran = new Random();
                context.Response.Write(""添加"");       //添加就不获取数据了
            }
           
        }

 使用说明：

/*
	 * 以下是单独的调用示例，你只需要自定义弹框的样式即可。
	 *          - $(element).hDialog(); //默认调用弹框；
	 *          - $(element).hDialog({box: '#demo'}); //自定义弹框容器ID/Class；
	 *          - $(element).hDialog({boxBg: '#eeeeee'}); //自定义弹框容器背景；
	 *          - $(element).hDialog({modalBg: '#eeeeee'}); //自定义遮罩背景颜色；
	 *          - $(element).hDialog({ 500}); //自定义弹框宽度；
	 *          - $(element).hDialog({height: 400}); //自定义弹框高度；
	 *          - $(element).hDialog({position: 'top'}); //弹框位置(默认center：居中，top：顶部居中，left：顶部居左，bottom：底部居右)
	 *          - $(element).hDialog({effect: 'fadeOut'}); //弹框关闭效果(结合animate.css里的动画，默认：zoomOut)；
	 *          - $(element).hDialog({hideTime: 2000}); //弹框定时关闭(默认0:不自动关闭, 以毫秒为单位)
	 *          - $(element).hDialog({modalHide: false}); //false:点击遮罩背景不关闭弹框,反之关闭；
	 *          - $(element).hDialog({isOverlay: false}); //是否显示遮罩背景(默认true：显示，false：不显示)
	 *          - $(element).hDialog({escHide: false}); //false:按ESC不关闭弹框,反之关闭；
	 *          - $(element).hDialog({autoShow: false}); //是否页面加载完成后自动弹出(默认false点击弹出，true：自动弹出)
	 *          - $(element).hDialog({types:2,iframeSrc:'http://css.doyoe.com/',iframeId:'iframeHBox',960,height:600}); //调用框架
	 * 
	 * 也可以整个覆盖（tips: 默认的无需写）：  
	 *          - $(element).hDialog({
	 *                box: '#demo',
	 *                boxBg: '#eeeeee',
	 *                modalBg: '#eeeeee',
	 *                 500,
	 *                height: 400,
	 *                positions: 'top',
	 *                effect: 'fadeOut',
	 *                hideTime: 3000,
	 *                isOverlay: false,
	 *                modalHide: false,
	 *                escHide: false,
	 *                autoShow: false,
	 *                types: 1,
	 *                iframeSrc: '',
	 *                iframeId: 'iframeHBox',
	 *                beforeShow: function(){ alert('执行回调'); },
	 *                afterHide: function(){ alert('执行回调'); }
	 *            });
	 *
	 * 下面是简单的扩展方法（以后再慢慢补充吧）：
	 *          - $.tooltip('错误提示文字'); 或者  $.tooltip('正确提示文字',4000,true,callback);  //内置2种提示风格(参数1为提示文字，参数2为自动关闭时间，参数3：true为正确，false为错误，参数4: 回调函数)
	 *          - $.showLoading('正在加载...',90,30); 或者  $.hideLoading(); //显示/移除加载(参数1为说明文字，参数2为宽度，参数3为高度，默认宽高为140*48，可不填写)
	 *          - $.goTop(); //返回顶部,(参数1：和屏幕底部的距离，参数2：和屏幕右侧的距离； PS:自定义一定要加单位，比如px,em, 也可以是百分比哦)
	 *          - $.dialog('alert','提示','hello'); 或者 $.dialog('confirm','提示','确认么？',0,function(){ alert('ok'); });  //消息框,(参数1：消息框类型(alert/confirm)，参数2：消息框标题；参数3：消息框内容度；参数4：消息框自动关闭时间，以毫秒为单位(默认0：不自动关闭)；参数5: 回调函数)
	 *          - $.closeDialog(); 或者 $.closeDialog(function(){ alert('ok'); }); //关闭消息框,(参数1：回调函数)
	 */
	

当然还有其他的功能，自己去探索吧。