zoukankan      html  css  js  c++  java
  • 弹出层

    <!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 id="Head1" runat="server">
        <title>无标题页</title>

        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/layer.js"></script>

        <link href="css/core.css" type="text/css" rel="stylesheet" />

        <script type="text/javascript" language="javascript">
    $(document).ready(function() {
    //综合效果
    var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",useOverlay:true,useFx:true,
    offsets:{
    x:0,
    y:-41
    }
    });
    t9.doEffects = function(way){
    if(way == "open"){
    this.popupLayer.css({opacity:0.3}).show(400,function(){
    this.popupLayer.animate({
    left:($(document).width() - this.popupLayer.width())/2,
    top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
    opacity:0.8
    },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
    }.binding(this));
    }
    else{
    this.popupLayer.animate({
    left:this.trigger.offset().left,
    top:this.trigger.offset().top,
    opacity:0.1
    },{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
    }
    }
    });
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="emample9" class="example">
            <div id="ele9">
                触发元素</div>
        </div>
        <div id="blk9" class="blk" style="display: none;">
            <div class="head">
                <div class="head-right">
                </div>
            </div>
            <div class="main">
                <a href="javascript:void(0)" id="close9" class="closeBtn">关闭</a>
                    <div class="mailconfirm_tc mailconfirm_tcm">
             <h1>系统提示:</h1>
            <h2><a href="#"><img src="../images/guanbi_03.gif" /></a></h2>
            <h3>
                <p><strong>您好:</strong></p>
                <p style=" text-indent:2em;">系统已再次为您的邮箱 <Span>kuker_911@sohu.com</Span> 发送了一封激活信,请登陆邮箱进行激活。</p>
            </h3>
            <div class="mailconfirm_locp mailconfirm_locp1"><a href="#" class="mailconfirm_color1" />立即去邮箱认证账号</a></div>
    </div>
           
            </div>
            <div class="foot">
                <div class="foot-right">
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

    js

    《script》

    Function.prototype.binding = function() {
        if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
        var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
        return function() {
            return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
        }
    }

    var Class = function(subclass){
        subclass.setOptions = function(options){
            this.options = jQuery.extend({}, this.options,options);
            for(var key in options){
                if(/^on[A-Z][A-Za-z]*$/.test(key)){
                    $(this).bind(key,options[key]);
                }
            }
        }
        var fn =  function(){
            if(subclass._init && typeof subclass._init == 'function'){
                this._init.apply(this,arguments);
            }
        }
        if(typeof subclass == 'object'){
            fn.prototype = subclass;
        }
        return fn;
    }

    var PopupLayer = new Class({
        options:{
            trigger:null,                            //触发的元素或id,必填参数
            popupBlk:null,                           //弹出内容层元素或id,必填参数
            closeBtn:null,                           //关闭弹出层的元素或id
            popupLayerClass:"popupLayer",            //弹出层容器的class名称
            eventType:"click",                       //触发事件的类型
            offsets:{                                //弹出层容器位置的调整值
                x:0,
                y:0
            },
            useFx:false,                             //是否使用特效
            useOverlay:false,                        //是否使用全局遮罩
            usePopupIframe:true,                     //是否使用容器遮罩
            isresize:true,                           //是否绑定window对象的resize事件
            onBeforeStart:function(){}            //自定义事件
        },
        _init:function(options){
            this.setOptions(options);                //载入设置
            this.isSetPosition = this.isDoPopup = this.isOverlay = true;    //定义一些开关
            this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass);     //初始化最外层容器
            this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0});         //容器遮罩,用于屏蔽ie6下的select
            this.trigger = $(this.options.trigger);                         //把触发元素封装成实例的一个属性,方便使用及理解
            this.popupBlk = $(this.options.popupBlk);                       //把弹出内容层元素封装成实例的一个属性
            this.closeBtn = $(this.options.closeBtn);                       //把关闭按钮素封装成实例的一个属性
            $(this).trigger("onBeforeStart");                               //执行自定义事件。
            this._construct()                                               //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
            this.trigger.bind(this.options.eventType,function(){            //给触发元素绑定触发事件
                if(this.isSetPosition){
                    this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
                }
                this.options.useOverlay?this._loadOverlay():null;               //如果使用遮罩则加载遮罩元素
                (this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
                if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
                    this.options.useFx?this.doEffects("open"):this.popupLayer.show();
                }                             
            }.binding(this));
            this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
            this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null;   //如果有关闭按钮,则给关闭按钮绑定关闭事件
        },
        _construct:function(){                  //构造弹出层
            this.popupBlk.show();
            this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
            this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;
            this.recalculatePopupIframe();
            this.popupLayer.hide();
        },
        _loadOverlay:function(){                //加载遮罩
            pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();
            this.overlay?this.overlay.remove():null;
            this.overlay = $(document.createElement("div"));
            this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")
        },
        doresize:function(){
            this.overlay?this.overlay.css({($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;
            if(this.isSetPosition){
                this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
            }
        },
        setPosition:function(left,top){          //通过传入的参数值改变弹出层的位置
            this.popupLayer.css({left:left,top:top});
        },
        doEffects:function(way){                //做特效
            way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");
           
        },
        recalculatePopupIframe:function(){     //重绘popupIframe,这个不知怎么改进,只好先用这个笨办法。
            this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
        },
        close:function(){                      //关闭方法
            this.options.useOverlay?this.overlay.hide():null;
            this.options.useFx?this.doEffects("close"):this.popupLayer.hide();
        }
    });

    《/script》

    css

    body, ul, li, div, h1, h2{padding:0;margin:0;}
    ul{list-style:none;}
    a{text-decoration:none;}
    .clr{clear:both;overflow:hidden;height:0;}
    a.closeBtn{position:absolute;top:10px;right:10px;display:block;60px;padding:4px 0;text-align:center;background:#fff;border:1px solid #85B6E2;color:#333;}
    a.closeBtn:hover{color:#fff;border:1px solid #85B6E2;background:#85B6E2;}

    body{padding:10px 20px 200px;}
    h1{color:#85B6E2;text-align:center;padding-top:20px;}
    .example{border:1px dashed #ccc;padding:40px;margin-top:10px;zoom:1;}
    .example .description{color:#85B6E2;float:left;padding:10px 20px 0 80px;font-size:20px;}
    .example .tigger{display:block;80px;padding:10px;text-align:center;background:#fff;border:1px solid #999;color:#333;cursor:pointer;float:left;}
    .example select{margin-top:10px;}
    .blk{500px;position:relative;}
    .blk .head, .blk .head-right, .blk .foot, .blk .foot-right{background:url(images/pop_up_bg.png);overflow:hidden;height:4px;}
    .blk .head{padding-left:4px;}
    .blk .head-right{background-position:right top;}
    .blk .foot{padding-left:4px;background-position:left bottom;_height:3px;}
    .blk .foot-right{background-position:right bottom;}
    .blk .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;position:relative;background:#fff;}
    .blk .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
    .blk .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
    .blk .main ul li{float:left;100px;text-align:center;line-height:30px;margin-bottom:10px;}
    .blk .main ul li a{color:#333;display:block;}
    .blk .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}


    /* 自定义样式 */
    .t5 .blk{700px;}
    .t5 .blk h2{color:#aaa;}
    .t5 .blk .main ul li a{color:#aaa;}
    .t5 .blk .head, .t5 .blk .head-right, .t5 .blk .foot, .t5 .blk .foot-right{background:url(images/pop_up_bg2.png);}

    /**/
    * html .popup_iframe{
        expression(this.previousSibling.style.width);
        height:expression(this.previousSibling.style.height);
    }

  • 相关阅读:
    打印乘法口诀
    打印三角形
    java语言基础
    java环境配置
    postgresql新建插入存储过程
    postman做自动化
    fiddler抓包篡改数据实例
    log4j常用4个日志级别
    来一个简单点的表单提交
    mapper文件简单格式
  • 原文地址:https://www.cnblogs.com/kakaxi/p/2047996.html
Copyright © 2011-2022 走看看