在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例高级JavaScript组件 → 非常不错的Jquery 弹出层源码layer.js

非常不错的Jquery 弹出层源码layer.js

高级JavaScript组件

下载此实例
  • 开发语言:js
  • 实例大小:0.03M
  • 下载次数:41
  • 浏览次数:3513
  • 发布时间:2014-04-21
  • 实例类别:高级JavaScript组件
  • 发 布 人:dmj123
  • 文件格式:.js
  • 所需积分:2
 相关标签: jQuery 弹出层

实例介绍

【实例简介】赞一个

【实例截图】

【核心代码】


;!function(window, undefined){		
"use strict";

var pathType = true, //是否采用自动获取绝对路径。false:将采用下述变量中的配置
pathUrl = 'lily/lib/layer/', //上述变量为false才有效,当前layerjs所在目录(不用填写host,相对站点的根目录即可)。

$, win, ready = {
    hosts: (function(){
        var dk = location.href.match(/\:\d /);
        dk = dk ? dk[0] : '';
        return 'http://'   document.domain   dk   '/';
    }()),
    
    getPath: function(){
        var js = document.scripts || $('script'), jsPath = js[js.length - 1].src;
        if(pathType){
            return jsPath.substring(0, jsPath.lastIndexOf("/")   1);
        } else {
            return this.hosts   pathUrl;
        } 
    }
};

//默认内置方法。
window.layer = {
    v : '1.7.0', //版本号
    ie6: !-[1,] && !window.XMLHttpRequest,
    index: 0,
    path: ready.getPath(),
    
    //载入模块
    use: function(module, callback){
        var i = 0, head = $('head')[0];
        var module = module.replace(/\s/g, '');
        var iscss = /\.css$/.test(module);
        var node = document.createElement(iscss ? 'link' : 'script');
        var id = module.replace(/\.|\//g, '');
        if(iscss){
            node.setAttribute('type', 'text/css');
            node.setAttribute('rel', 'stylesheet');
        }
        node.setAttribute((iscss ? 'href' : 'src'), layer.path   module);
        node.setAttribute('id', id);
        if(!$('#'  id)[0]){
            head.appendChild(node);
        }
        $(node).ready(function(){
            callback && callback();
        });
    },
    
    ready: function(callback){
        return layer.use('skin/layer.css', callback);
    }, 
    
    //普通对话框,类似系统默认的alert()
    alert: function(alertMsg, alertType, alertTit, alertYes){
        return $.layer({
            dialog : {msg : alertMsg, type : alertType, yes : alertYes},
            title : alertTit,
            area: ['auto', 'auto']
        });
    }, 
    
    //询问框,类似系统默认的confirm()
    confirm: function(conMsg, conYes, conTit, conNo){ 
        return $.layer({
            dialog : {msg : conMsg, type : 4, btns : 2, yes : conYes, no : conNo},
            title : conTit
        }); 
    },
    
     //普通消息框,一般用于行为成功后的提醒,默认两秒自动关闭
    msg: function(msgText, msgTime, parme, callback){
        var icon, conf = {title: false, closeBtn: false};
        (msgText == '' || msgText == undefined) && (msgText = ' ');
        msgTime === undefined && (msgTime = 2);
        if(typeof parme === 'number'){
            icon = parme;
        } else {
            parme = parme || {};
            icon = parme.type;
            conf.success = function(){layer.shift(parme.rate)};
            conf.shade = parme.shade;
        }
        conf.time = msgTime;
        conf.dialog = {msg: msgText, type: icon};
        conf.end = typeof parme === 'function' ? parme : callback;
        return $.layer(conf);	
    }, 
    
    //加载层快捷引用
    load: function(parme, loadIcon){
        if(typeof parme === 'string'){
            return this.msg(parme, 0, 16);
        } else {
            return $.layer({
                time: parme,
                loading: {type : loadIcon},
                bgcolor: !loadIcon ? '' : '#fff',
                shade: [0.1, '#000', !loadIcon ? false : true],
                border :[7,0.3, '#000', (loadIcon === 3 || !loadIcon) ? false : true],
                type : 3,
                title : ['',false],
                closeBtn : [0 , false]
            });
        }
    }, 
    
    //tips层快捷引用
    tips: function(html, follow, parme, maxWidth, guide, style){
        var conf = {type: 4, shade: false, success: function(layerE){
            if(!this.closeBtn){
                layerE.find('.xubox_tips').css({'padding-right': 10});
            }
        }, bgcolor:'', tips:{msg: html, follow: follow}};
        parme = parme || {};
        conf.time = parme.time || parme;
        conf.closeBtn = parme.closeBtn || false
        conf.maxWidth = parme.maxWidth || maxWidth;
        conf.tips.guide = parme.guide || guide;
        conf.tips.style = parme.style || style;
        return $.layer(conf);
    }
};

var Class = function(setings){	
    var config = this.config;
    layer.index  ;
    this.index = layer.index;
    this.config = $.extend({} , config , setings);
    this.config.dialog = $.extend({}, config.dialog , setings.dialog);
    this.config.page = $.extend({}, config.page , setings.page);
    this.config.iframe = $.extend({}, config.iframe , setings.iframe);	
    this.config.loading = $.extend({}, config.loading , setings.loading);
    this.config.tips = $.extend({}, config.tips , setings.tips);
    this.creat();
};

Class.pt = Class.prototype;

//默认配置
Class.pt.config = {
    type: 0,
    shade: [0.3 , '#000' , true],
    shadeClose: false,
    fix: true,
    move: ['.xubox_title' , true],
    moveOut: false,
    title: ['信息' , true],
    offset: ['200px' , '50%'],
    area: ['310px' , 'auto'],
    closeBtn: [0 , true],
    time: 0,
    bgcolor: '#fff',
    border: [8 , 0.3 , '#000', true],
    zIndex: 19891014, 
    maxWidth: 400,
    dialog: {btns : 1, btn : ['确定','取消'], type : 3, msg : '', yes : function(index){ layer.close(index);}, no : function(index){ layer.close(index);}
    },
    page: {dom: '#xulayer', html: '', url: ''},
    iframe: {src: 'http://sentsin.com'},
    loading: {type: 0},
    tips: {msg: '', follow: '', guide: 0, isGuide: true, style: ['background-color:#FF9900; color:#fff;', '#FF9900']},
    success: function(layer){}, //创建成功后的回调
    close: function(index){ layer.close(index);}, //右上角关闭回调
    end: function(){} //终极销毁回调
};

Class.pt.type = ['dialog', 'page', 'iframe', 'loading', 'tips'];

//容器
Class.pt.space = function(html){
    var html = html || '', times = this.index, config = this.config, dialog = config.dialog, dom = this.dom,
    ico = dialog.type === -1 ? '' : '<span class="xubox_msg xulayer_png32 xubox_msgico xubox_msgtype'   dialog.type   '"></span>',
    frame = [
    '<div class="xubox_dialog">'  ico  '<span class="xubox_msg xubox_text" style="'  (ico ? '' : 'padding-left:20px')  '">'   dialog.msg   '</span></div>',	
    '<div class="xubox_page">'  html  '</div>',
    '<iframe allowtransparency="true" id="'  dom.ifr  ''  times  '" name="'  dom.ifr  ''  times  '" onload="$(this).removeClass(\'xubox_load\');" class="'  dom.ifr  '" frameborder="0" src="'   config.iframe.src   '"></iframe>',				
    '<span class="xubox_loading xubox_loading_'  config.loading.type  '"></span>',
    '<div class="xubox_tips" style="'  config.tips.style[0]  '"><div class="xubox_tipsMsg">'  config.tips.msg  '</div><i class="layerTipsG"></i></div>'
    ],
    shade = '' , border = '', zIndex = config.zIndex   times,
    shadeStyle = 'z-index:'  zIndex  '; background-color:'  config.shade[1]  '; opacity:'  config.shade[0]  '; filter:alpha(opacity='  config.shade[0]*100  ');';

    config.shade[2] && (shade = '<div times="'  times  '" id="xubox_shade'   times   '" class="xubox_shade" style="'  shadeStyle  '"></div>');	

    config.zIndex = zIndex;
    var title = '', closebtn = '', borderStyle = "z-index:"  (zIndex-1)  ";  background-color: "  config.border[2]  "; opacity:"  config.border[1]  "; filter:alpha(opacity="  config.border[1]*100  "); top:-"  config.border[0]  "px; left:-"  config.border[0]  "px;";

    config.border[3] && (border = '<div id="xubox_border'  times  '" class="xubox_border" style="'  borderStyle  '"></div>');
    config.closeBtn[1] && (closebtn = '<a class="xubox_close xulayer_png32 xubox_close'   config.closeBtn[0]  '" href="javascript:;"></a>');
    config.title[1] && (title = '<h2 class="xubox_title"><em>'   config.title[0]   '</em></h2>')
    var boxhtml = '<div times="'  times  '" showtime="'  config.time  '" style="z-index:'  zIndex  '" id="'  dom.lay  ''  times 
     '" class="'  dom.lay  '">'	
      '<div style="background-color:'  config.bgcolor  '; z-index:'  zIndex  '" class="xubox_main">'
      frame[config.type]
      title
      closebtn
      '<span class="xubox_botton"></span>'
      '</div>'  border   '</div>';
    return [shade , boxhtml];
};

//缓存字符
Class.pt.dom = {
    lay: 'xubox_layer',
    ifr: 'xubox_iframe'
};

//创建骨架
Class.pt.creat = function(){
    var that = this , space = '', config = this.config, dialog = config.dialog, title = that.config.title, dom = that.dom, times = that.index;;

    title.constructor === Array || (that.config.title = [title, true]);
    title === false && (that.config.title = [title, false]);

    var page = config.page, body = $("body"), setSpace = function(html){
        var html = html || ''
        space = that.space(html);
        body.append(space[0]);
    };

    switch(config.type){
        case 1:
            if(page.html !== ''){
                setSpace('<div class="xuboxPageHtml">'  page.html  '</div>');
                body.append(space[1]);
            }else if(page.url !== ''){
                setSpace('<div class="xuboxPageHtml" id="xuboxPageHtml'  times  '">'  page.html  '</div>');
                body.append(space[1]);
                $.get(page.url, function(datas){
                    $('#xuboxPageHtml'  times).html(datas);
                    page.ok && page.ok(datas);
                });
            }else{
                if($(page.dom).parents('.xubox_page').length == 0){
                    setSpace();
                    $(page.dom).show().wrap(space[1]);
                }else{
                    return;	
                }
            }
        break;
        case 2:
            setSpace();
            body.append(space[1]);
        break;
        case 3:
            config.title = ['', false];
            config.area = ['auto', 'auto']; 
            config.closeBtn = ['', false];
            $('.xubox_loading')[0] && layer.close($('.xubox_loading').parents('.' dom.lay).attr('times'));
            setSpace();
            body.append(space[1]);
        break;
        case 4:
            config.title = ['', false];
            config.area = ['auto', 'auto'];
            config.fix = false;
            config.border = false;
            $('.xubox_tips')[0] && layer.close($('.xubox_tips').parents('.' dom.lay).attr('times'));
            setSpace();
            body.append(space[1]);
            $('#'  dom.lay   times).find('.xubox_close').css({top: 6, right: 7});
        break;		
        default: 
            config.title[1] || (config.area = ['auto','auto']);
            $('.xubox_dialog')[0] && layer.close($('.xubox_dialog').parents('.' dom.lay).attr('times'));
            setSpace();
            body.append(space[1]);
        break;
    };
    
    this.layerS = $('#xubox_shade'   times);
    this.layerB = $('#xubox_border'   times);
    this.layerE = $('#'  dom.lay   times);

    var layerE = this.layerE;
    this.layerMian = layerE.find('.xubox_main');
    this.layerTitle = layerE.find('.xubox_title');
    this.layerText = layerE.find('.xubox_text');
    this.layerPage = layerE.find('.xubox_page');
    this.layerBtn = layerE.find('.xubox_botton');

    //设置layer面积坐标等数据 
    if(config.offset[1].indexOf("px") != -1){
        var _left = parseInt(config.offset[1]);
    }else{
        if(config.offset[1] == '50%'){
            var _left =  config.offset[1];
        }else{
            var _left =  parseInt(config.offset[1])/100 * win.width();
        }
    };
    layerE.css({left: _left   config.border[0], width: config.area[0], height: config.area[1]});
    config.fix ? layerE.css({top: parseInt(config.offset[0])   config.border[0]}) : layerE.css({top: parseInt(config.offset[0])   win.scrollTop()   config.border[0], position: 'absolute'});	


    //配置按钮 对话层形式专有
    if(config.type == 0 && config.title[1]){
        switch(dialog.btns){
            case 0:
                that.layerBtn.html('').hide();
            break;
            case 2:
                that.layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton2">'  dialog.btn[0]  '</a>'   '<a href="javascript:;" class="xubox_no xubox_botton3">'  dialog.btn[1]   '</a>');
            break;
            default:
                that.layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton1">'  dialog.btn[0]  '</a>');
        }
    };

    if(layerE.css('left') === 'auto'){
        layerE.hide();
        setTimeout(function(){
            layerE.show();
            that.set(times);
        }, 500);
    }else{
        that.set(times);
    }
    config.time <= 0 || that.autoclose();
    this.callback();
};

//初始化骨架
Class.pt.set = function(times){
    var that = this, layerE = that.layerE, config = that.config, dialog = config.dialog, page = config.page, loading = config.loading, dom = that.dom;
    that.autoArea(times);
    if(config.title[1]){
        layer.ie6 && that.layerTitle.css({width : layerE.outerWidth()});	
    }else{
        config.type != 4 && layerE.find('.xubox_close').addClass('xubox_close1');
    };

    layerE.attr({'type' :  that.type[config.type]});

    switch(config.type){
        case 1: 	
            layerE.find(page.dom).addClass('layer_pageContent');
            config.shade[2] && layerE.css({zIndex: config.zIndex   1});
            config.title[1] && that.layerPage.css({top: that.layerTitle.outerHeight()});
        break;
        
        case 2:
            var iframe = layerE.find('.'  dom.ifr), heg = layerE.height();
            iframe.addClass('xubox_load').css({width: layerE.width()});
            config.title[1] ? iframe.css({top: that.layerTitle.height(), height: heg - that.layerTitle.height()}) : iframe.css({top: 0, height : heg});
            layer.ie6 && iframe.attr('src', config.iframe.src);
        break;
        
        case 3:
        break;
        case 4 :
            var layArea = [0, layerE.outerHeight()], fow = $(config.tips.follow), fowo = {
                width: fow.outerWidth(),
                height: fow.outerHeight(),
                top: fow.offset().top,
                left: fow.offset().left
            }, tipsG = layerE.find('.layerTipsG');

            config.tips.isGuide || tipsG.remove();
            fowo.width > config.maxWidth && layerE.width(config.maxWidth);
            
            fowo.tipColor = config.tips.style[1];
            layArea[0] = layerE.outerWidth();
            
            //辨别tips的方位
            fowo.where = [function(){ //上
                fowo.tipLeft = fowo.left;
                fowo.tipTop = fowo.top - layArea[1] - 10;
                tipsG.removeClass('layerTipsB').addClass('layerTipsT').css({'border-right-color': fowo.tipColor});   
            }, function(){ //右
                fowo.tipLeft = fowo.left   fowo.width   10;
                fowo.tipTop = fowo.top;
                tipsG.removeClass('layerTipsL').addClass('layerTipsR').css({'border-bottom-color': fowo.tipColor}); 
            }, function(){ //下
                fowo.tipLeft = fowo.left;
                fowo.tipTop = fowo.top   fowo.height   10;
                tipsG.removeClass('layerTipsT').addClass('layerTipsB').css({'border-right-color': fowo.tipColor});
            }, function(){ //左
                fowo.tipLeft = fowo.left - layArea[0]   10;
                fowo.tipTop = fowo.top;
                tipsG.removeClass('layerTipsR').addClass('layerTipsL').css({'border-bottom-color': fowo.tipColor});
            }];
            fowo.where[config.tips.guide]();
            
            /* 8*2为小三角形占据的空间 */
            if(config.tips.guide === 0){
                fowo.top - (win.scrollTop()   layArea[1]   8*2) < 0 && fowo.where[2]();
            } else if (config.tips.guide === 1){
                win.width() - (fowo.left   fowo.width   layArea[0]   8*2) > 0 || fowo.where[3]()
            } else if (config.tips.guide === 2){
                (fowo.top - win.scrollTop()   fowo.height   layArea[1]   8*2) - win.height() > 0 && fowo.where[0]();
            } else if (config.tips.guide === 3){
               layArea[0]   8*2 - fowo.left > 0 && fowo.where[1]()
            }
            layerE.css({left: fowo.tipLeft, top: fowo.tipTop});
        break;
        
        default:
            that.layerMian.css({'background-color': '#fff'});
            if(config.title[1]){
                that.layerText.css({paddingTop: 18   that.layerTitle.outerHeight()});
            }else{
                layerE.find('.xubox_msgico').css({top: 8});
                that.layerText.css({marginTop : 11});	
            }
        break;
    };
    
    config.fadeIn && layerE.css({opacity: 0}).animate({opacity: 1}, config.fadeIn);
    that.move();
};

//自适应宽高
Class.pt.autoArea = function(times){
    
    var that = this, layerE = that.layerE, config = that.config, page = config.page,
    layerMian = that.layerMian, layerBtn = that.layerBtn, layerText = that.layerText,
    layerPage = that.layerPage, layerB = that.layerB, titHeight, outHeight, btnHeight = 0, 
    load = $(".xubox_loading");
    if(config.area[0] === 'auto' && layerMian.outerWidth() >= config.maxWidth){	
        layerE.css({width : config.maxWidth});
    }
    config.title[1] ? titHeight = that.layerTitle.innerHeight() : titHeight = 0;
    switch(config.type){
        case 0:
            var aBtn = layerBtn.find('a');
            outHeight =  layerText.outerHeight()   20;
            if(aBtn.length > 0){
                btnHeight = aBtn.outerHeight()    20;
            }
        break;
        case 1:
            outHeight = $(page.dom).outerHeight();
            config.area[0] === 'auto' && layerE.css({width : layerPage.outerWidth()});
            if(page.html !== '' || page.url !== ''){
                outHeight = layerPage.outerHeight();
            }
        break;
        case 3:
            outHeight = load.outerHeight(); 
            layerMian.css({width: load.width()});
        break;
    };
    (config.area[1] === 'auto') && layerMian.css({height: titHeight   outHeight   btnHeight});
    layerB.css({width: layerE.outerWidth()   2*config.border[0] , height: layerE.outerHeight()   2*config.border[0]});
    (layer.ie6 && config.area[0] != 'auto') && layerMian.css({width : layerE.outerWidth()});
    (config.offset[1] === '50%' || config.offset[1] == '') && (config.type !== 4) ? layerE.css({marginLeft : -layerE.outerWidth()/2}) : layerE.css({marginLeft : 0});
};

//拖拽层
Class.pt.move = function(){
    var that = this, config = this.config, dom = that.dom, conf = {
        setY: 0,
        moveLayer: function(){
            if(parseInt(conf.layerE.css('margin-left')) == 0){
                var lefts = parseInt(conf.move.css('left'));
            }else{
                var lefts = parseInt(conf.move.css('left'))   (-parseInt(conf.layerE.css('margin-left')))
            }
            if(conf.layerE.css('position') !== 'fixed'){
                lefts = lefts - conf.layerE.parent().offset().left;
                conf.setY = 0
            }
            conf.layerE.css({left: lefts, top: parseInt(conf.move.css('top')) - conf.setY});
        }
    };
    
    config.move[1] && that.layerE.find(config.move[0]).attr('move','ok');
    config.move[1] ? that.layerE.find(config.move[0]).css({cursor: 'move'}) : that.layerE.find(config.move[0]).css({cursor: 'auto'});
    
    $(config.move[0]).on('mousedown', function(M){	
        M.preventDefault();
        if($(this).attr('move') === 'ok'){
            conf.ismove = true;
            conf.layerE = $(this).parents('.'  dom.lay);
            var xx = conf.layerE.offset().left, yy = conf.layerE.offset().top, ww = conf.layerE.width() - 6, hh = conf.layerE.height() - 6;
            if(!$('#xubox_moves')[0]){
                $('body').append('<div id="xubox_moves" class="xubox_moves" style="left:'  xx  'px; top:'  yy  'px; width:'  ww  'px; height:'  hh  'px; z-index:2147483584"></div>');
            }
            conf.move = $('#xubox_moves');
            config.moveType && conf.move.css({opacity: 0});
           
            conf.moveX = M.pageX - conf.move.position().left;
            conf.moveY = M.pageY - conf.move.position().top;
            conf.layerE.css('position') !== 'fixed' || (conf.setY = win.scrollTop());
        }
    });
    
    $(document).mousemove(function(M){			
        if(conf.ismove){
            var offsetX = M.pageX - conf.moveX, offsetY = M.pageY - conf.moveY;
            M.preventDefault();

            //控制元素不被拖出窗口外
            if(!config.moveOut){
                conf.setY = win.scrollTop();
                var setRig = win.width() - conf.move.outerWidth() - config.border[0], setTop = config.border[0]   conf.setY;               
                offsetX < config.border[0] && (offsetX = config.border[0]);
                offsetX > setRig && (offsetX = setRig); 
                offsetY < setTop && (offsetY = setTop);
                offsetY > win.height() - conf.move.outerHeight() - config.border[0]   conf.setY && (offsetY = win.height() - conf.move.outerHeight() - config.border[0]   conf.setY);
            }
            
            conf.move.css({left: offsetX, top: offsetY});	
            config.moveType && conf.moveLayer();
            
            offsetX = null;
            offsetY = null;
            setRig = null;
            setTop = null
        }					  						   
    }).mouseup(function(){
        try{
            if(conf.ismove){
                conf.moveLayer();
                conf.move.remove();
            }
            conf.ismove = false;
        }catch(e){
            conf.ismove = false;
        }
        config.moveEnd && config.moveEnd();
    });
};

//自动关闭layer
Class.pt.autoclose = function(){
    var that = this, time = this.config.time, maxLoad = function(){
        time--;
        if(time === 0){
            layer.close(that.index);
            clearInterval(that.autotime);
        }
    };
    this.autotime = setInterval(maxLoad , 1000);
};

ready.config = {
    end : {}
};

Class.pt.callback = function(){
    var that = this, layerE = that.layerE, config = that.config, dialog = config.dialog;
    that.openLayer();
    that.config.success(layerE);
    layer.ie6 && that.IE6();

    layerE.find('.xubox_close').off('click').on('click', function(e){
        e.preventDefault();
        config.close(that.index);
    });
    
    layerE.find('.xubox_yes').off('click').on('click',function(e){
        e.preventDefault();
        dialog.yes(that.index);
    });
    
    layerE.find('.xubox_no').off('click').on('click',function(e){
        e.preventDefault();
        dialog.no(that.index);
    });
    
    this.layerS.off('click').on('click', function(e){
        e.preventDefault();
        that.config.shadeClose && layer.close(that.index);
    });
    
    ready.config.end[that.index] = config.end;
};

Class.pt.IE6 = function(){
    var that = this, layerE = that.layerE, select = $('select'), dom = that.dom;
    var _ieTop =  layerE.offset().top;	
    //ie6的固定与相对定位
    if(that.config.fix){
        var ie6Fix = function(){
            layerE.css({top : $(document).scrollTop()   _ieTop});
        };	
    }else{
        var ie6Fix = function(){
            layerE.css({top : _ieTop});	
        };
    }
    ie6Fix();
    win.scroll(ie6Fix);

    //隐藏select
    $.each(select, function(index , value){
        var sthis = $(this);
        if(!sthis.parents('.' dom.lay)[0]){
            sthis.css('display') == 'none' || sthis.attr({'layer' : '1'}).hide();
        }
        sthis = null;
    });

    //恢复select
    that.reselect = function(){
        $.each(select, function(index , value){
            var sthis = $(this);
            if(!sthis.parents('.' dom.lay)[0]){
                (sthis.attr('layer') == 1 && $('.' dom.lay).length < 1) && sthis.removeAttr('layer').show(); 
            }
            sthis = null;
        });
    }; 
};

//给layer对象拓展方法
Class.pt.openLayer = function(){
    var that = this, dom = that.dom;

    //自适应宽高
    layer.autoArea = function(index){
        return that.autoArea(index);
    };

    //获取layer当前索引
    layer.getIndex = function(selector){
        return $(selector).parents('.' dom.lay).attr('times');	
    };

    //获取子iframe的DOM
    layer.getChildFrame = function(selector, index){
        index = index || $('.'  dom.ifr).parents('.' dom.lay).attr('times');
        return $('#'  dom.lay   index).find('.'  dom.ifr).contents().find(selector);	
    };

    //得到当前iframe层的索引,子iframe时使用
    layer.getFrameIndex = function(name){
        return $(name ? '#'  name : '.'  dom.ifr).parents('.' dom.lay).attr('times');
    };

    //iframe层自适应宽高
    layer.iframeAuto = function(index){
        index = index || $('.'  dom.ifr).parents('.' dom.lay).attr('times');
        var heg = this.getChildFrame('body', index).outerHeight(),
        lbox = $('#'  dom.lay   index), tit = lbox.find('.xubox_title'), titHt = 0;
        !tit || (titHt = tit.height());
        lbox.css({height: heg   titHt});
        var bs = -parseInt($('#xubox_border'  index).css('top'));
        $('#xubox_border'  index).css({height: heg   2*bs   titHt});
        $('#'  dom.ifr   index).css({height: heg});
    };

    //关闭layer
    layer.close = function(index){
        var layerNow = $('#'  dom.lay   index), shadeNow = $('#xubox_moves, #xubox_shade'   index);
        if(layerNow.attr('type') == that.type[1]){
            if(layerNow.find('.xuboxPageHtml')[0]){
                layerNow.remove();
            }else{
                layerNow.find('.xubox_close,.xubox_botton,.xubox_title,.xubox_border').remove();
                for(var i = 0 ; i < 3 ; i  ){
                    layerNow.find('.layer_pageContent').unwrap().hide();
                }
            }
        }else{
            document.all && layerNow.find('#'  dom.ifr   index).remove();
            layerNow.remove();
        }
        shadeNow.remove();
        layer.ie6 && that.reselect();
        typeof ready.config.end[index] === 'function' && ready.config.end[index]();
        delete ready.config.end[index];
    };

    //关闭加载层
    layer.loadClose = function(){
        var parent = $('.xubox_loading').parents('.' dom.lay),
        index = parent.attr('times');
        layer.close(index);
    };

    //出场内置动画
    layer.shift = function(type, rate){
        var config = that.config, iE6 = layer.ie6, layerE = that.layerE, cutWth = 0, ww = win.width(), wh = win.height();
        (config.offset[1] == '50%' || config.offset[1] == '') ? cutWth = layerE.outerWidth()/2 : cutWth = layerE.outerWidth();
        var anim = {
            t: {top : config.border[0]},
            b: {top : wh - layerE.outerHeight() - config.border[0]},
            cl: cutWth   config.border[0],
            ct: -layerE.outerHeight(),
            cr: ww - cutWth - config.border[0],
            fn: function(){
                iE6 && that.IE6();	
            }
        };
        switch(type){
            case 'left-top':
                layerE.css({left: anim.cl, top: anim.ct}).animate(anim.t, rate, anim.fn);
            break; 
            case 'top':
                layerE.css({top: anim.ct}).animate(anim.t, rate, anim.fn);
            break;
            case 'right-top':
                layerE.css({left: anim.cr, top: anim.ct}).animate(anim.t, rate, anim.fn);
            break;
            case 'right-bottom':
                layerE.css({left: anim.cr, top: wh}).animate(anim.b, rate, anim.fn);
            break;
            case 'bottom':
                layerE.css({top: wh}).animate(anim.b, rate, anim.fn);
            break;
            case 'left-bottom':
                layerE.css({left: anim.cl, top: wh}).animate(anim.b, rate, anim.fn);
            break;
            case 'left':
                layerE.css({left: -layerE.outerWidth(), marginLeft:0}).animate({left:anim.t.top}, rate, anim.fn);
            break;
            
        };	
    };

    //初始化拖拽元素
    layer.setMove = function(){
        return that.move();
    };

    //给指定层重置属性
    layer.area = function(index, options){
        var nowobect = [$('#'  dom.lay   index), $('#xubox_border'  index)],
        type = nowobect[0].attr('type'), main = nowobect[0].find('.xubox_main'),
        title = nowobect[0].find('.xubox_title');
        if(type === that.type[1] || type === that.type[2]){
            nowobect[0].css(options);
            if(nowobect[1][0]){
                nowobect[1].css({
                    width: options.width - 2*parseInt(nowobect[1].css('left')), 
                    height: options.height - 2*parseInt(nowobect[1].css('top'))
                });
            }
            main.css({height: options.height});
            if(type === that.type[2]){
                var iframe = nowobect[0].find('iframe');
                iframe.css({width: options.width, height: title ? options.height - title.outerHeight() : options.height});
            }
            if(nowobect[0].css('margin-left') !== '0px') {
                options.hasOwnProperty('top') && nowobect[0].css({top: options.top - (nowobect[1][0] && parseInt(nowobect[1].css('top')))});
                options.hasOwnProperty('left') && nowobect[0].css({left: options.left   nowobect[0].outerWidth()/2 - (nowobect[1][0] && parseInt(nowobect[1].css('left')))})
                nowobect[0].css({marginLeft : -nowobect[0].outerWidth()/2});
            }
        }
    };

    //关闭所有层
    layer.closeAll = function(){
        var layerObj = $('.' dom.lay);
        $.each(layerObj, function(){
            var i = $(this).attr('times');
            layer.close(i);
        });
    };

    //置顶当前窗口
    layer.zIndex = that.config.zIndex;
    layer.setTop = function(layerNow){
        var setZindex = function(){
            layer.zIndex  ;
            layerNow.css('z-index', layer.zIndex   1);
        };
        layer.zIndex = parseInt(layerNow[0].style.zIndex);
        layerNow.on('mousedown', setZindex);
        return layer.zIndex;
    };
};

//主入口
ready.run = function(){
    $ = jQuery; 
    win = $(window);
    layer.use('skin/layer.css');
    $.layer = function(deliver){
        var o = new Class(deliver);
        return o.index;
    };
};

//为支持CMD规范的模块加载器
var require = '../../init/jquery'; //若采用seajs,需正确配置jquery的相对路径。未用可无视此处。
if(window.seajs){
    define([require], function(require, exports, module){
        ready.run();
        exports.layer = [window.layer, window['$'].layer];
    });
}else{
    ready.run();
}

}(window);


标签: jQuery 弹出层

实例下载地址

非常不错的Jquery 弹出层源码layer.js

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警