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;}}
]
});
});