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 = thisvar $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().topPosition.left = event.pageX - $logoArea.offset().leftDragging = true;});$(document).mousemove(function(event){if(Dragging){var top = event.pageY - Position.topvar left = event.pageX - Position.leftmoveto.call($tableBox, top, left);}}).mouseup(function(){Dragging = false;});}}var buttons = option.buttonsif($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;}}]});});