先来看下效果图:
弹出层的html如下:
<div id="floatBoxBg"></div> <div id="floatBox" class="floatBox"> <div class="title"><h4>标题</h4><span>关闭</span></div> <div class="content">内容</div> </div>
下面我的应用: 第一步:下载jquery文件,我的是1.3.2版本!请自己下载! 第二步:建个css文件,命名为 jq_div_css.css ,代码如下[自己想怎么改就怎么改]: #floatBoxBg{display:none;width:100%;height:100%;background:#000;position:absolute;top:0;left:0;} .floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;} .floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;} .floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;} .floatBox .title span{float:right;cursor:pointer;} .floatBox .content{padding:20px 15px;background:#fff;}
第三步:下载 Lee dialog 插件, 这里我命名成 jq_div_fuc.js ,代码如下: var dialogFirst=true; function dialog(title,content,width,height,cssName){ if(dialogFirst==true){ var temp_float=new String; temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></div>"; temp_float+="<div id=\"floatBox\" class=\"floatBox\">"; temp_float+="<div class=\"title\"><h4></h4><span>关闭</span></div>"; temp_float+="<div class=\"content\"></div>"; temp_float+="</div>"; $("body").append(temp_float); dialogFirst=false; }
$("#floatBox .title span").click(function(){ $("#floatBoxBg").animate({opacity:"0"},"normal",function()); $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function()); });
$("#floatBox .title h4").html(title); contentType=content.substring(0,content.indexOf(":")); content=content.substring(content.indexOf(":")+1,content.length); switch(contentType){ case "url": var content_array=content.split("?"); $("#floatBox .content").ajaxStart(function(){ $(this).html("loading..."); }); $.ajax({ type:content_array[0], url:content_array[1], data:content_array[2], error:function(){ $("#floatBox .content").html("error..."); }, success:function(html){ $("#floatBox .content").html(html); } }); break; case "text": $("#floatBox .content").html(content); break; case "id": $("#floatBox .content").html($("#"+content+"").html()); break; case "iframe": $("#floatBox .content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+(parseInt(height)-30)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>"); }
$("#floatBoxBg").show(); $("#floatBoxBg").animate({opacity:"0.5"},"normal"); $("#floatBox").attr("class","floatBox "+cssName); $("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",width:width,height:height}); $("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal"); } 以下是如何应用,及其他说明: 应用:
dialog(title,content,width,height,cssName);
参数:
顺序 |
参数 |
功能 |
备注 |
1 |
title |
弹出层的标题 |
必填,纯文本 |
2 |
content |
弹出层的内容 |
:url |
get或post某一页面里的html,该页面要求只包含body的子标签 |
:text |
直接写入内容 |
:id |
显示页面里某id的子标签 |
:iframe |
层内内容以框架显示 |
3 |
width |
弹出层的宽 |
必填,css值,比如“200px” |
4 |
height |
弹出层的高 |
如上,但是可用“auto” |
5 |
cssName |
弹出层的css |
给id floatBox加入的样式名,层内样式可以通过这个样式名来定制 |
演示:
1。 弹出纯文本内容 dialog("我的标题","text:我的内容","200px","auto","text"); 2。 弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div> dialog("我的标题","id:testID","300px","auto","id"); 3。 加载一个页面以框架示 把blueidea加载进来,定义css:body .iframe .content{padding:0;}复盖一下,因为.content默认padding:20px; dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe");
以下,是我开发中应用的心得与解决的方案: ===================================================================== 我想实现的功能是这样的,点击,弹出个层,层里面是一个form表单! 奇怪的问题出现了,对这个表单,我加了jq 的验证,但全部无效!很是郁闷!我就找呀找呀找原因!后来, 实在不行了,换成iframe模式了,一开始用的是ID这个层! iframe模式下,jq的验证就生效! 希望对遇到的朋友有所帮助! 测试浏览器,是IE8和FF3.0
|