自己试着用jquery做出来的,自己测试能用,不=不知道还有什么不对的地方还请大神们看看
$(function(){
var dilog=$('#dilog');
var dilogTitle=$('#dilog_title');
var closeButton=$('.close_button');
var mark=$('#mark');
var showDilog=$('.showDilog');
var current=false;
var moveX;
var moveY;
//自动居中函数
function autoCenter(el){
var elX=($(window).width()-el.width())/2;
var elY=($(window).height()-el.height())/2;
el.css({'left':elX+'px','top':elY+'px'});
}
//覆盖全屏函数
function filltoBody(el){
el.css({'width':'100%','height':'100%'});
}
//鼠标事件1:当鼠标点下去的时候
dilogTitle.on('mousedown',function(e){
var mouseX=e.pageX;
var mouseY=e.pageY;
moveX=mouseX-dilog.offset().left;
moveY=mouseY-dilog.offset().top;
current=true;
})
//鼠标事件2:当鼠标移动的时候
dilogTitle.on('mousemove',function(e){
var nowX=0;
var nowY=0;
if(current===true)
{
var nowX=e.pageX-moveX;
var nowY=e.pageY-moveY;
nowX=Math.min($(window).width()-dilog.width(),Math.max(0,nowX));
nowY=Math.min($(window).height()-dilog.height(),Math.max(0,nowY));
dilog.css({'left':nowX+'px','top':nowY+'px'});
}
})
//鼠标事件3:当鼠标松开的时候
$(document).on('mouseup',function(){
current=false;
})
//点击显示
showDilog.on('click',function(){
dilog.css('display','block');
mark.css('display','block');
autoCenter(dilog);
filltoBody(mark);
})
//关闭按钮
closeButton.on('click',function(){
dilog.css('display','none');
mark.css('display','none');
})
//窗口变化
$(window).resize(function(){
autoCenter(dilog);
filltoBody(mark);
})
})