遮罩层，可拖动

最新推荐文章于 2020-07-31 17:43:50 发布

转载最新推荐文章于 2020-07-31 17:43:50 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qduanlu/archive/2013/01/23/2872770.html

文章标签：

#javascript #ViewUI

效果：

/*
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();
	});
});

下载地址：http://files.cnblogs.com/qduanlu/Float.zip

转载于:https://www.cnblogs.com/qduanlu/archive/2013/01/23/2872770.html