遮罩层,可拖动
效果:
/* title: 窗口标题 content: 内容(可选内容为){ text | id | img | url | iframe } width: 内容宽度 height: 内容高度 drag: 是否可以拖动(ture为是,false为否) 原理:主要是对div的z-index的控制。 */ $(document).ready(function(){ function TipsWindown(title,content,width,height,drag) { $("#windown-box").remove(); this.title = title; this.content = content; this.width = width >= 950 ? this.width=950 : this.width = width; this.height = height >= 527 ? this.height=527 : this.height= height; this.drag = drag?drag:true; var that = this; var windownBg_html = new String; windownBg_html = "<div>"+ "<div id='windownbg' style='height:"+$(window).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999900'></div>"+ "<div id='windown-box' class='ui-widget-content'>"+ "<div id='windown-title'><h2></h2><span id='windown-close'>关闭</span></div>"+ "<div id='windown-content-border'><div id='windown-content'></div></div>" "</div>"+ "</div>"; var $template = $(windownBg_html); $template.find("h2").html(this.title); $template.find("#windown-content").html($("#"+this.content).html()); $("body").append($template.html()); $("#windownbg").show(); $("#windownbg").animate({opacity:"0.5"},"normal"); $("#windown-box").show(); if( this.height >= 527 ) { $("#windown-title").css({width:(parseInt(this.width)+22)+"px"}); $("#windown-content").css({width:(parseInt(this.width)+17)+"px",height:this.height+"px"}); }else { $("#windown-title").css({width:(parseInt(this.width)+10)+"px"}); $("#windown-content").css({width:width+"px",height:this.height+"px"}); } $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(this.height)+53)/2)+"px",marginLeft:-((parseInt(this.width)+32)/2)+"px"}); if(this.drag){ $("#windown-box").draggable(); } $("#windown-close").live("click",function(){ that.closeWindown(); }); } TipsWindown.prototype.closeWindown = function(){ $("#windownbg").remove(); $("#windown-box").fadeOut("slow",function(){$(this).remove();}); } var tipsWindownObject = null; $("#isread").bind("click",function(){ tipsWindownObject = new TipsWindown("jquery弹出层", 'simTestContent', 600, 255); }); $("#confirmTerm").live("click",function(){ tipsWindownObject.closeWindown(); }); });