基于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 ,