jquery 弹出自定义层（一）
代码不算是很复杂，但是实现的交互效果很好，可以自定义弹出div里面的内容。
Default.aspx前台页面代码：（后台页面类代码无需修改）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" > <head runat="server"> <title>jQuery弹出层</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/dialog.js"></script> <script language="javascript" type="text/javascript"> showdiv=function(){ dialog("jquery弹出层","content","300px","auto","id"); } </script> <style type="text/css"> .cc{color:#FF0000} #floatBoxBg{display:none;width:100%;height:auto;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{ height:auto; padding:20px 15px;background:#fff; color:#000000} </style> </head> <body> <form id="form1" runat="server"> <div> <div id="content" visible="false" style="visibility:hidden">测试如果在调用弹出层方法dialog()，的时候，如果传递的type为id,则将id为content的标签中的内容填充到弹出的层中！</div> </div> <input id="Button2" type="button" value="button" οnclick="showdiv()" /> </form> </body> </html>
dialog.js代码：
// Lee dialog 1.0
var dialogFirst=true; function dialog(title,content,width,height,Type){
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(){$(this).hide();}); $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();}); });
$("#floatBox .title h4").html(title); contentType=content.substring(0,content.indexOf(":")); content=content.substring(content.indexOf(":")+1,content.length); switch(Type){ case "url": var content_array=content.split("?"); $("#floatBox .content").ajaxStart(function(){ $(this).html("loading..."); }); $.ajax({ type:content_array[0], ], 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 "+Type); $("#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"); }