[原创]jQuery动画弹出窗体支持多种展现方式

　　今天刚写的利用jQuery动画弹出窗体，支持了string、Ajax、iframe、controls四种展现方式，具体细节下面慢慢介绍，先看效果图。

　　

　　

　　动画效果

　　从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。

　　说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。

　　展现方式

　　　　第一种：string

　　　　这是最简单最明了的方式，不用多说，就是直接赋值字符串并显示出来。

　　　　第二种：ajax

　　　　这种是支持ajax的展现，就是异步获取数据并展示出来。

　　　　第三种: iframe

　　　　顾名思义就是支持嵌套iframe显示。

　　　　第四种：controls

　　　　这个名字有点不太好理解，就是将页面的某个对象展现出来。比如：document.getElementById("showName");

　　插件代码实现

　　　

(function($){
        $.alerts = {
            alert : function(o,options){
                var defaults = {
                    title : '标题',
                    content : '内容',
                    GetType : 'string',        //controls,ajax,string,iframe
                    IsDrag : true,
                    Url : '',
                    Data : null,
                    400,
                    height:300,
                    callback : function(){}
                }
                
                var options = $.extend(defaults,options);
                if(!$("#window")[0])
                {
                    $.alerts._createObject();
                }
                var position = $.alerts._getPosition(o);                
                var winPosition = $.alerts._getWindowPosition(options);
                $("#windowContent").hide();
                $("#window").css(
                    {
                        position.w,
                        height:position.h,
                        top:position.t,
                        left:position.l,
                        zIndex:1001
                    }
                );
                $("#windowBottom,#windowBottomContent").css(
                    {
                        height:options.height-30
                    }
                );
                $("#windowContent").css(
                    {
                        height:options.height - 45,
                        options.width - 25
                    }
                );
                $("#windowTopContent").html(options.title);
                switch(options.GetType){
                    case "string":
                        $("#windowContent").html(options.content);
                    break;
                    case "ajax":
                        if(options.Url == ''){
                            alert("AjaxUrl不能为空");
                            return;
                        }else{
                            $.ajax(
                                {
                                    type: "POST",
                                    url: options.Url,
                                    data: options.Data,
                                    success: function(msg){
                                        $("#windowContent").html(msg);
                                    }

                                }
                            );
                        }
                    break;
                    case "controls":
                        $("#windowContent").html(options.content.innerHTML);
                    break;
                    case "iframe":
                        $("#windowContent").empty();
                        $("<iframe>").attr(
                            {
                                src : options.Url,
                                options.width,
                                height:options.height
                            }
                        ).appendTo("#windowContent");
                    break;
                }
                
                $("#window").animate(
                    {
                        left:winPosition.l,
                        top:winPosition.t,
                        height:winPosition.h,
                        winPosition.w
                    },500,function(){                        
                        //$("#windowContent").fadeIn('slow');
                        $("#windowContent").slideDown(600);

                        if($("#middleElement_bgDiv").get().length == 0){
                            
                            $("<div>").attr("id","middleElement_bgDiv").css(
                                {
                                    position:"absolute",
                                    left:"0px",
                                    top:"0px",
                                    $(window).width()+"px",
                                    height:Math.max($("body").height(),$(window).height())+"px",
                                    filter:"Alpha(Opacity=40)",
                                    opacity:"0.4",
                                    backgroundColor:"#AAAAAA",
                                    zIndex:"1000",
                                    margin:"0px",
                                    padding:"0px"
                                }
                            ).appendTo("body");                
                        }else{
                            $("#middleElement_bgDiv").show();
                        }
                    }
                );

                $("#windowClose").one("click",function(){

                    $("#windowContent").slideUp(600,function(){
                        
                        $("#window").animate(
                            {
                                left:position.l,
                                top:position.t,
                                height:position.h,
                                position.w
                            },500,function(){
                                $(this).hide();
                                if($("#middleElement_bgDiv").get().length > 0){
                                    $("#middleElement_bgDiv").hide();
                                }
                                $("#window").css(
                                    {
                                        left:winPosition.l,
                                        top:winPosition.t,
                                        height:winPosition.h,
                                        winPosition.w
                                    }
                                );
                            }
                        );
                    })
                    
                });

                $("#windowTop").mousedown(function(event){
                    $.alerts.Drag(
                        document.getElementById("window"),
                        {                    
                            e : event,                            
                            Drag : options.IsDrag
                        }
                    );
                });
                
            },
            
            _createObject : function(){
                $("<div id=\"window\">"+
                    "<div id=\"windowTop\">"+
                        "<div id=\"windowTopContent\">Window example</div>"+
                        "<img src=\"images/window_min.jpg\" id=\"windowMin\" />"+
                        "<img src=\"images/window_max.jpg\" id=\"windowMax\" />"+
                        "<img src=\"images/window_close.jpg\" id=\"windowClose\" />"+
                    "</div>"+
                    "<div id=\"windowBottom\"><div id=\"windowBottomContent\">&nbsp;</div></div>"+
                    "<div id=\"windowContent\"></div>"+                    
                    "<img src=\"images/window_resize.gif\" id=\"windowResize\" />"+
                "</div>").appendTo("body");        
                
            },            
            _getWindowPosition : function(options){
                var wPosition = $.alerts._getPosition("#window");
                var windowPosition = {};                
                windowPosition.t = parseInt($(window).height()/6)+parseInt($(window).scrollTop());
                windowPosition.l = ($(window).width()+$(window).scrollLeft())/2 - options.width/2;                
                windowPosition.w = options.width;
                windowPosition.h = options.height;
                return windowPosition;
            },
            _getPosition : function(o){
                var top = $(o).offset().top;
                var left = $(o).offset().left;
                var height = $(o).height();
                var width = $(o).width();
                return {t:top,l:left,h:height,w:width};
            },
            Drag : function(obj,options){
            
                var e = options.e || window.event;
                var Drag = options.Drag;
                
                if(Drag == false)return;
                            
                var x=parseInt(obj.style.left); 
                var y=parseInt(obj.style.top);         
                 
                var x_=e.clientX-x; 
                var y_=e.clientY-y;  
                
                if(document.addEventListener){ 
                    document.addEventListener('mousemove', inFmove, true); 
                    document.addEventListener('mouseup', inFup, true); 
                } else if(document.attachEvent){ 
                    document.attachEvent('onmousemove', inFmove); 
                    document.attachEvent('onmouseup', inFup); 
                } 
                 
                inFstop(e);     
                inFabort(e); 
                 
                function inFmove(e){ 
                    var evt; 
                    if(!e)e=window.event;                     
                     
                    obj.style.left=e.clientX-x_+'px'; 
                    obj.style.top=e.clientY-y_+'px';                     
                    
                    inFstop(e); 
                } 
                function inFup(e){ 
                    var evt; 
                    if(!e)e=window.event; 
                     
                    if(document.removeEventListener){ 
                        document.removeEventListener('mousemove', inFmove, true); 
                        document.removeEventListener('mouseup', inFup, true); 
                    } else if(document.detachEvent){ 
                        document.detachEvent('onmousemove', inFmove); 
                        document.detachEvent('onmouseup', inFup); 
                    } 
                     
                    inFstop(e); 
                } 

                function inFstop(e){ 
                    if(e.stopPropagation) return e.stopPropagation(); 
                    else return e.cancelBubble=true;             
                } 
                function inFabort(e){ 
                    if(e.preventDefault) return e.preventDefault(); 
                    else return e.returnValue=false; 
                } 


            }
        }
        JAlert = function(o,json){
            $.alerts.alert(o,json);
        };
    })(jQuery);

调用代码

$(function(){
        $("a").each(function(){
            $(this).bind("click",function(){
                JAlert(this,{                    
                    title : '提示窗体',
                    content : $("#msg")[0].outerHTML,
                    GetType : 'string',        //controls,ajax,string,iframe                    
                    IsDrag : true,
                    Url : "windows.html",
                    Data : null,
                    300,
                    height:200

                });
            });
        });
    });

使用说明：

　　　　title: 窗体标题

　　　　content:取决于GetType属性，如果GetType='string',那么content就是要显示的内容，如果GetType='controls'，那么content则为要显示的DOM对象。其它两个类型可不用填写。

　　　　GetType:展现的四种类型：string,iframe,ajax,controls

　　　　IsDrag:是否支持拖拽

　　　　Url: 同样取决于GetType属性，如果GetType='ajax'，那么Url就是请求的URL地址，如果GetType='iframe'，那么URL就是iframe的链接地址。其它两个类型不用填写

　　　　Data:当GetType='ajax'时，Data属性为请求的数据。

　　　　显示层的宽度

　　　　height:显示层的高度

　　HTML代码

　　

<body>
<a href="javascript:void(0);" id="windowOpen1">Open window</a>
<a href="javascript:void(0);" id="windowOpen2">Open window</a>      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="javascript:void(0);" id="windowOpen3">Open window</a>

<div id="msg" style="font-size:16px;padding-top:16px;line-height:25px;">&nbsp;&nbsp;&nbsp;&nbsp;欢迎访问《<a href="http://lewis.cnblogs.com" target="_blank">山高我为峰</a>》的博客,希望与大家一起探讨技术问题，共同实现各自的梦想！<br/><br/>网址：http://lewis.cnblogs.com</div>
</body>

　　样式

　　

<style type="text/css" media="all">

body
{
    background: #fff;
    height: 100%;
}
#window
{
    position: absolute;
    left: 200px;
    top: 100px;
    width: 400px;
    /*height: 300px;*/
    overflow: hidden;
    display: none;
}
#windowTop
{
    height: 30px;
    overflow: 30px;
    background-image: url(images/window_top_end.png);
    background-position: right top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    cursor: move;
}
#windowTopContent
{
    margin-right: 13px;
    background-image:url(images/window_top_start.png);
    background-position:left top;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    text-indent: 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;    
    color: #6caf00;
}
#windowMin
{
    position: absolute;
    right: 25px;
    top: 10px;
    cursor: pointer;
}
#windowMax
{
    position: absolute;
    right: 25px;
    top: 10px;
    cursor: pointer;
    display: none;
}
#windowClose
{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
#windowBottom
{
    position: relative;
    height: 270px;
    background-image: url(images/window_bottom_end.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}
#windowBottomContent
{
    position: relative;
    height: 270px;
    background-image: url(images/window_bottom_start.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    margin-right: 13px;
}
#windowResize
{
    position: absolute;
    right: 3px;
    bottom: 5px;
    cursor: se-resize;
}
#windowContent
{
    position:absolute;
    top: 30px;
    left: 10px;
    width: auto;
    height: auto;
    overflow: auto;
    margin-right: 10px;
    border: 1px solid #6caf00;
    height: 255px;
    width: 375px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #fff;
}
#windowContent *
{
    margin: 10px;
}
</style>

待完成

　　还有两项功能没完成，一个是最小化，还有一个拖动大小。

好了，代码贴完了，有兴趣的朋友可下载试试。

下载