jquery实现可拖动弹出层特效

浏览数：44 / 时间：2015年06月09日

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现可拖动弹出层特效</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tc.all.js"></script>
<style type="text/css">
body{margin:0; padding:0;font-size:12px;}
dt{padding:10px;}
p{ height:100px; line-height:100px; border:1px solid #eee; margin:10px; }
i{ font-style:normal;}
#detail{    position:absolute;width:400px;height:200px;border:1px solid #ccc;background:#efefef; display:none;}
#detail .tit{ background:#ddd; display:block; height:33px; cursor:move;}
#detail .tit i{ float:right; line-height:33px; padding:0 8px;cursor:default;}
#detail2{position:absolute;width:300px;height:100px;border:1px solid #555;background:#555;display:none;}
#detail2 .tit{ background:#333; display:block; height:33px;cursor:move;}
#detail2 .tit i{ float:right; line-height:33px; padding:0 8px; color:#777; cursor:default;}
</style>
</head>
<body>
<br /><br />
<center>
<dl>
    <dt><button id="t1">点我弹一个</button></dt>
    <dt><button  id="t2">点我再弹一个</button></dt>
</dl>
</center>
<div id="detail">
<div class="tit"><i class="close">关闭</i></div>
<pre>
    /***
     * 小鸟弹窗，按ESC可以关闭窗口。
     * 小鸟弹窗不带样式，大家可以根据自己的项目写样式。
     * 小鸟弹窗很小，min版的只1.15k，因为小所以值得应用。
     * 小鸟弹窗希望有网友可以再改进，希望他变得更小。
    ***/
</pre>
</div>
<div id="detail2">
<div class="tit"><i class="close">关闭</i></div>
再弹出一个窗
</div>
<script type="text/javascript">
    $("#t1").click(function(){
            popWin("detail");
    });
    $("#t2").click(function(){
            popWin("detail2");
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

js：

jquery-1.7.2.min

/***
 * 小鸟弹出层插件，由漫画Jquery弹出层插件改编而来
 * QQ:9169775
 * 编写时间：2013年3月21号
 * version:1.0
***/
function popWin(obj){
    var _z=9000;//新对象的z-index
    var _mv=false;//移动标记
    var _x,_y;//鼠标离控件左上角的相对位置        
    var _obj= $("#"+obj);
    var _wid= _obj.width();
    var _hei= _obj.height();
    var _tit= _obj.find(".tit");
    var _cls =_obj.find(".close");
    var docE =document.documentElement;
    var left=($(document).width()-_obj.width())/2;
    var top =(docE.clientHeight-_obj.height())/2;
    _obj.css({    "left":left,"top":top,"display":"block","z-index":_z-(-1)});
            
    _tit.mousedown(function(e){
        _mv=true;
        _x=e.pageX-parseInt(_obj.css("left"));//获得左边位置
        _y=e.pageY-parseInt(_obj.css("top"));//获得上边位置
        _obj.css({    "z-index":_z-(-1)}).fadeTo(50,.5);//点击后开始拖动并透明显示    
    });
    _tit.mouseup(function(e){
        _mv=false;
        _obj.fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明                 
    
    });
    
    $(document).mousemove(function(e){
        if(_mv){
            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            if(x<=0){x=0};
            x=Math.min(docE.clientWidth-_wid,x)-5;
            var y=e.pageY-_y;
            if(y<=0){y=0};
            y=Math.min(docE.clientHeight-_hei,y)-5;
            _obj.css({
                top:y,left:x
            });//控件新位置
        }
    });

            _cls.live("click",function(){
        $(this).parent().parent().hide().siblings("#maskLayer").remove();
    });
            
    $(‘<div id="maskLayer"></div>‘).appendTo("body").css({
        "background":"#000","opacity":".4","top":0,"left":0,"position":"absolute","zIndex":"8000"
    });
    reModel();
    $(window).bind("resize",function(){reModel();});
    $(document).keydown(function(event) {
        if (event.keyCode == 27) {
            $("#maskLayer").remove();
            _obj.hide();
        }
    });
    function reModel(){
        var b = docE? docE : document.body,
        height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight,
        width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;
        $("#maskLayer").css({
            "height": height,"width": width
        });
    };
}