dialog粗说(弹出对话框)

dialog插件

dialog插件 作用弹出对话框
首选加载css与js

<script src="html/scritps/jquery.js" type="text/javascript"></script>	//首选加载jquery.js文件

<script src="html/dialog/dialog.js" type="text/javascript"></script>	//加载dialog.js文件

<link href="html/dialog/dialog.css" tyep="text/css">			//加载dialog.css样式 可以不用加载

dialog.js文件

var $dialog = (function(){
	tableBox =	'<table class="layer">'+'<tr><td class="top_l"></td><td class="top_c"></td><td class="top_r"></td></tr>'+'<tr><td class="mid_l"></td><td class="mid_c"></td><td class="mid_r"></td></tr>'+'<tr><td class="bottom_l"></td><td class="bottom_c"></td><td class="bottom_r"></td></tr>'+'</table>';
	layerBox =	'<div class="layerBox"></div>'
	logoArea =	'<div class="layerBoxTop"></div>'
	mainArea =	'<div class="layerContent"></div>'
	titleBar =  '<strong></strong>'
	closeBtn =	'<a href="#" class="btn_close close"></a>'
	clickBar =	'<div class="optArea"></div>'
	backMask =	'<div class="layer_bg"></div>'

	var moveto = function(top, left){
		$(this).css('position', 'absolute').css('top',top+'px').css('left',left+'px');
	}

	var center = function(){
		var top	 = $(window).scrollTop()  + ($(window).height() - $(this).height())/4;
		var left = $(window).scrollLeft() + ($(window).width()  - $(this).width() )/2;
		moveto.call(this, top, left);
	} 

	var $dialog = function(option){
		var $this = this
		var $tableBox = $(tableBox)
		var $panelBox = $tableBox.find('td.mid_c')
		var $content  = $(option.content).show();

		if(option.onlyContent){
			$panelBox.append($content);
		}else{
			var $layerBox = $(layerBox)
			var $logoArea = $(logoArea)
			var $mainArea = $(mainArea)
			var $titleBar = $(titleBar).html(option.title || 'Info');                     
			var $closeBtn = $(closeBtn).click(function(){$this.hide();return false;});

			$logoArea.append($titleBar)
			$logoArea.append($closeBtn)
			$layerBox.append($logoArea)
			$layerBox.append($mainArea)
			
			$mainArea.append($content)
			$panelBox.append($layerBox)

			if(option.Dragging){
				var Dragging = false;
				var Position = {'top':0,'left':0}
				$logoArea.css('cursor', 'move').mousedown(function(event){
					Position.top  = event.pageY - $logoArea.offset().top
					Position.left = event.pageX - $logoArea.offset().left
					Dragging = true;
				});
				$(document).mousemove(function(event){
					if(Dragging){
						var top	 = event.pageY - Position.top
						var left = event.pageX - Position.left
						moveto.call($tableBox, top, left);
					}
				}).mouseup(function(){
						Dragging = false;
				});
			}
		}

		var buttons = option.buttons
		if($layerBox && buttons){
			$clickBar = $(clickBar);
			for(i in buttons){
				var $button = $(buttons[i].button).click(buttons[i].action);
				$clickBar.append($button);
				$clickBar.append(' ');
			}
			$mainArea.append($clickBar);
		}

		$tableBox.appendTo('body');

		var $backMask = false;
		if(option.mask){
			$backMask = $(backMask)
			if($.browser.msie){$backMask.append('<iframe frameBorder="0" class="layer_fix_ie6"></iframe>');}
			$backMask.appendTo('body')
			var zindex = 100;
			$backMask.css('z-index', zindex)
			$tableBox.css('z-index', zindex+1)
		}

		this.hide = function(){$tableBox.hide();if($backMask){$backMask.hide()}}
		this.show = function(){$tableBox.show();if($backMask){$backMask.show()}center.apply($tableBox);}
		this.drop = function(){$tableBox.remove()}

		this.hide();
	}

	return $dialog;
})();

//dragging reference
$(function(){
	return false;
	var DragDiv = false;
	$('div.show').mouseover(function(){$(this).parent().find('div.drag').show();});
	$('div.drag').mouseout(function(){$(this).hide()});

	$('div.drag').mousedown(function(event){
		DragDiv = $(this).parent();
		$('#gap').insertAfter(DragDiv).show();
		DragDiv.addClass('draging')
			.css('left', (event.pageX - Math.floor(DragDiv.width() /2))+'px')
			.css('top' , (event.pageY - Math.floor(DragDiv.height()/2))+'px');
		$(this).text('松开鼠标以放置');
	});

	$('div.drag').mouseup(function(event){
		$('#gap').after(DragDiv).hide();
		DragDiv.removeClass('draging');
		DragDiv = false;
		$(this).text('按下鼠标以拖动');
		$('div.drag').hide();
	});

	$.fn.extend({
		in_prev : function(x,y){
			var t = $(this).position().top;
			var l = $(this).position().left;
			var w = Math.floor($(this).width()/2);
			var h = $(this).height();
			if( y > t && y < t+h && x > l && x < l+w ) return true;
			return false;
		},
		in_next : function(x,y){
			var t = $(this).position().top;
			var l = $(this).position().left;
			var w = Math.floor($(this).width()/2);
			var h = $(this).height();
			if( y > t && y < t+h && x > l+w && x < l+2*w ) return true;
			return false;
		}
	});

	$('div.photo').bind('dragin',function(event, x, y){
		if($(this).in_prev(x,y)){$('#gap').insertBefore($(this))}
		if($(this).in_next(x,y)){$('#gap').insertAfter(	$(this))}
		return false;
	});

	$('body').mousemove(function(event){
		if(DragDiv){
			DragDiv
				.css('left', (event.pageX - Math.floor(DragDiv.width() /2))+'px')
				.css('top' , (event.pageY - Math.floor(DragDiv.height()/2))+'px');
			$('div.photo').not('div.draging').trigger('dragin', [event.pageX, event.pageY]);
		}
	});
});

dialog.css文件 可以不用加载

.dialog-mask	{position:absolute;width:100%;height:100%;top:0px;left:0px;filter:alpha(opacity=15);z-index:2;opacity:0.15;background-color:#000;}
.dialog-mask-ie6{position:absolute;width:100%;height:100%;top:0px;left:0px;filter:alpha(opacity= 0);z-index:1;}

css文件也可以不加载

要弹出的模块：

<div id="alert" style="display:none;" class="content">
	<div class="layer_one_row"><i class="icon_fail"></i>你尚未创建简历，无法<span id="alert_dialog">申请</span>职位。</div>
</div>

js代码

<script type="text/javascript">
$(document).ready(function(){
	var $alert = new $dialog({"title":"注册", "content":"#alert", "mask":true});
	setTimeout(function(){$alert.show();}, 5000);
});
</script>

也可以这样写

$(document).ready(function(){
	var $alert = new $dialog({"title":"提示", "content":"#alert", "mask":true, 
		"buttons":[
			{"button":"<a href='http://www.baidu.com'>百度</a>"},
			{"button":"<a>关闭</a>", "action":function(){$alert.hide();return false;}}
		]
	});
});