弹出层插件，现在用的是越来越多，网上也有很多开源的类似插件，功能都很强大，于是我也模仿了一个，原来其实很简单，无非是创建节点，显示该节点，如果支持可拖拽，那就在对象上加上mousedown,mousemove,mouseup这三个事件，修改坐标值就OK.下面就是我的一个实现
js部分
/* * title:@谈出层插件 * autor:@aliang * 2012-12-20 * */ $(function(){ $.fn.dialog=function(options){ var defaults={ Event:"click", title:"title", type:"text", content:"content", 500, height:400, isAuto:false, closeId:"closeId", _move:false, // 弹出层移动标记 drag:true //是否支持拖动 } var _x,_y; var options= $.extend(defaults,options); $("body").prepend("<div class='zhezhao' id='fb"+options.title+"'></div><div class='dialog' id='"+options.title+"'><div class='title' id='t"+options.title+"'><h4></h4><span class='close' id='c"+options.title+"'>X</span></div><div class='content'></div></div>"); /*绑定对象*/ $bg=$("#fb"+options.title+"") //遮罩层 $this=$(this); $title=$("#t"+options.title+""); //谈出层拖动对象 $name=$("#"+options.title+" h4") $close=$("#c"+options.title+""); //谈出层关闭按钮对象 $content=$("#"+options.title+" .content") //谈出层内容对象 $dialog=$("#"+options.title+""); //弹出层对象 /*初始化*/ $dialog.css({left:(($(document).width())/2-(parseInt(options.width)/2)-5)+"px",top:((document.documentElement.clientHeight)/2-(parseInt(options.height)/2))+"px",options.width,height:options.height}); $content.css({height:parseInt(options.height)-30}) $dialog.css({"z-index":1001}) $name.html(options.title); $content.html(options.content); $dialog.hide(); $bg.hide(); /*绑定事件*/ $close.live("click",function(){ $bg.hide(); $dialog.hide(); }); $title.live("mousedown",function(e){ if(!options.drag) return; options._move=true; _x= e.pageX-parseInt($dialog.css("left"))//获取事件坐标距谈出层左边的距离 _y= e.pageY-parseInt($dialog.css("top")) //获取事件坐标距谈出层头上的距离 $dialog.css({"z-index":2000}) this.setCapture && this.setCapture(); }); $(document).live("mousemove",function(e){ if(options._move){ var x= e.pageX-_x; var y= e.pageY-_y; var maxX=document.body.clientWidth-$dialog.get(0).clientWidth; var maxY=document.body.clientHeight-$dialog.get(0).clientHeight; x=(x<=0)?0:x; y=(y<=0)?0:y; x=(x>=maxX)?maxX:x; y=(y>=maxY)? maxY:y; console.log("X:"+x,"Y:"+y) console.log(document.body.clientHeight ) $dialog.css({left:x,top:y}); } }); $(document).live("mouseup",function(){ options._move=false $dialog.css({"z-index":101}) this.releaseCapture && this.releaseCapture(); }) $(this).live("click",function(){ if($dialog.size()>0) return else $dialog.show(); }) $(this).click(function(){ $bg.show(); $dialog.show(); }) } })
css部分：
.dialog{position: absolute;border: 5px solid #d08686 ;} .dialog .title{background: #d08686;height: 23px;padding: 7px 10px 0;color: #ffffff;cursor: move;} .dialog .title h4{float: left; padding: 0; margin: 0;font-size: 14px;line-height: 16px; font-weight: bold;display: inline;} .dialog .title span{float: right;cursor: pointer;font-size: 20px; font-weight: bold; color: #ffffff; margin-top: -5px;} .dialog .content{background: #ffffff;} .zhezhao{ 100%;height: 100%;background: black; position: fixed !important;position: absolute;top: 0;left: 0;filter: alpha(opacity=0.2);opacity: 0.2;z-index: 100;}
html部分:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html,body{ height:100%} </style> <link rel="stylesheet" href="../css/dialog.css"> </head> <body> <input type="button" value="test" id="test"> <script src="../js/jquery-1.8.0.js"></script> <Script src="../js/dialog.js"></Script> <script> $(function(){ $("#test").dialog({ Event:"click", title:"我是一个谈出层", type:"text", content:"<div><input type='button' value='test'></div>", 500, height:300, isAuto:false, closeId:"closeId", drag:true }); }) </script> </body> </html>
实现：
是不是很简单，如有疑问或建议请加qq:531294008，注明aliangDialog便可。