当前位置:编程学习 > JAVA >>

基于jquery实现的弹出层效果实现!

css代码:
[css]
*{padding:0; margin:0} 
/*弹出层插件样式开始*/ 
.floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0; z-index:999;} 
.floatBox{border:#1b315e 5px solid;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;background:#fff; display:none; z-index:1000;} 
.floatBox .title{height:23px;padding:7px 10px 0;color:#fff;background-attachment: scroll;background:#1b315e;background-repeat: repeat-x;background-position: 0px 0px; cursor:move;} 
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px; font-weight:bold; display:inline;} 
.floatBox .title span{float:right;cursor:pointer;}display:inline; 
.floatBox .title span img{cursor:pointer; margin:-5px -5px;} 
.floatBox .content{padding:0;background:#fff;overflow-x:hidden;overflow-y: auto;} 
.closeDialog{ font-size:20px; font-weight:bold; color:#000; margin-top:-5px;} 
.closeDialog:hover{ font-size:20px; font-weight:bold; color:#fff; margin-top:-5px; position: relative fixed absolute} 
/*弹出层插件样式结束*/ 

*{padding:0; margin:0}
/*弹出层插件样式开始*/
.floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0; z-index:999;}
.floatBox{border:#1b315e 5px solid;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;background:#fff; display:none; z-index:1000;}
.floatBox .title{height:23px;padding:7px 10px 0;color:#fff;background-attachment: scroll;background:#1b315e;background-repeat: repeat-x;background-position: 0px 0px; cursor:move;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px; font-weight:bold; display:inline;}
.floatBox .title span{float:right;cursor:pointer;}display:inline;
.floatBox .title span img{cursor:pointer; margin:-5px -5px;}
.floatBox .content{padding:0;background:#fff;overflow-x:hidden;overflow-y: auto;}
.closeDialog{ font-size:20px; font-weight:bold; color:#000; margin-top:-5px;}
.closeDialog:hover{ font-size:20px; font-weight:bold; color:#fff; margin-top:-5px; position: relative fixed absolute}
/*弹出层插件样式结束*/
js代码:
[javascript]
var t;//当前激活层的对象      
var _move=false;//移动标记  
var _x,_y;//鼠标离控件左上角的相对位置  
var newz=1;//新对象的z-index  
var oldz=1;//旧对象的z-index  
$(function() { 
    $.fn.manhuaDialog = function(options) { 
        var defaults = { 
            Event : "click",                                //触发响应事件  
            title : "title",                                //弹出层的标题  
            type : "Iframe",                                    //弹出层类型(text、容器ID、URL、Iframe)  
            content : "content",                            //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)  
            width : 500,                                    //弹出层的宽度  
            height : 400,                                   //弹出层的高度  
            closeID : "closeId",                            //关闭对话框的ID  
            isAuto : false,                                 //是否自动弹出  
            time : 2000,                                    //设置自动弹出层时间,前提是isAuto=true  
            isClose : false,                                //是否自动关闭          
            timeOut : 2000                                  //设置自动关闭时间,前提是isClose=true  
             
        }; 
        var options = $.extend(defaults,options);        
        $("body").prepend("<div class='floatBoxBg' id='fb"+options.title+"'></div><div class='floatBox' id='"+options.title+"'><div class='title' id='t"+options.title+"'><h4></h4><span class='closeDialog' id='c"+options.title+"'>X</span></div><div class='content'></div></div>");  
        var $this = $(this);                                //当然响应事件对象  
        var $blank = $("#fb"+options.title);                        //遮罩层对象  
        var $title = $("#"+options.title+" .title h4");&

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,