一个非常好用的可拖动的jquery弹出层

来源：互联网发布：大数据平台架构模式编辑：程序博客网时间：2024/06/09 09:17

不用解释直接上代码，代码有注释，不懂的话直接拿去用。这只是一个简单的效果，若要复杂的效果请参考http://www.hestudy.com/file/demo/tipswindown/页面挡下来。

js代码：

$(document).ready(function(){var dialog_with = 400;var dialog_height = 200;var _move=false;//移动标记var _x,_y;//鼠标离控件左上角的相对位置$("#dialog_show").click(function(){$("body").css("opacity","0.2");//body加蒙板var window_width = $(window).width();var window_height = $(window).height();/*var widd = $(this).width();var heii = $(this).height();*/var left = (window_width - dialog_with)/2+"px";//距左边位置var top = (window_height - dialog_height)/2+"px";//距顶边位置$("#dialog").css({//设置弹出框样式"z-index":"5","position":"absolute","display":"block","width":"400px","height":"200px","left":left,"top":top,"background":"#FFFFFF","border":"1px solid #999999",});});$("#dialog_close").click(function(event){//关闭/*$("#dialog").css({"display":"none","speed":"600"});*/$("#dialog").fadeOut("slow");$("body").fadeTo("slow",1.0);});    $("#dialog_title").click(function(){        //alert("click");//点击（松开后触发）        }).mousedown(function(e){        _move=true;        _x=e.pageX-parseInt($("#dialog").css("left"));        _y=e.pageY-parseInt($("#dialog").css("top"));        $("#dialog").fadeTo(20, 0.55);//点击后开始拖动并透明显示    });$("#dialog").mouseup(function(){_move=false;$("#dialog").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明});    $("#dialog_title").mousemove(function(e){        if(_move){            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置            var y=e.pageY-_y;            $("#dialog").css({top:y,left:x});//控件新位置        }    }).mouseup(function(){_move=false;$("#dialog").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明});   })

html代码

<input type="button" value="点击" id="dialog_show"/><div id="dialog" style="display:none;"><div style="background:url(headerbg.gif); width:auto; height:27px; cursor:move" id="dialog_title"><div style="background:url(x.gif); width:18px; height:18px; float:right; cursor:pointer" title="关闭"  id='dialog_close'></div></div>这里放弹出层内容<br/></div>