下的插件从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"></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"> </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"> </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:回调函数) */
当然还有其他的功能,自己去探索吧。