在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例Ajax框架/RIA → Jquery 弹出层 示例源码下载

Jquery 弹出层 示例源码下载

Ajax框架/RIA

下载此实例
  • 开发语言:js
  • 实例大小:0.03M
  • 下载次数:24
  • 浏览次数:259
  • 发布时间:2016-03-14
  • 实例类别:Ajax框架/RIA
  • 发 布 人:zcz8023
  • 文件格式:.rar
  • 所需积分:2
 相关标签: 弹出层

实例介绍

【实例简介】弹出遮罩层
【实例截图】
【核心代码】function popWin(obj){
var _z=9000;//新对象的z-index
var _mv=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var _obj= $("#" obj);
var _wid= _obj.width();
var _hei= _obj.height();
var _tit= _obj.find(".tit");
var _cls =_obj.find(".close");
var docE =document.documentElement;
var left=($(document).width()-_obj.width())/2;
var top =(docE.clientHeight-_obj.height())/2;
_obj.css({ "left":left,"top":top,"display":"block","z-index":_z-(-1)});

_tit.mousedown(function(e){
_mv=true;
_x=e.pageX-parseInt(_obj.css("left"));//获得左边位置
_y=e.pageY-parseInt(_obj.css("top"));//获得上边位置
_obj.css({ "z-index":_z-(-1)}).fadeTo(50,.5);//点击后开始拖动并透明显示
});
_tit.mouseup(function(e){
_mv=false;
_obj.fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明  

});

$(document).mousemove(function(e){
if(_mv){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
if(x<=0){x=0};
x=Math.min(docE.clientWidth-_wid,x)-5;
var y=e.pageY-_y;
if(y<=0){y=0};
y=Math.min(docE.clientHeight-_hei,y)-5;
_obj.css({
top:y,left:x
});//控件新位置
}
});

_cls.live("click",function(){
$(this).parent().parent().hide().siblings("#maskLayer").remove();
});

$('<div id="maskLayer"></div>').appendTo("body").css({
"background":"#000","opacity":".4","top":0,"left":0,"position":"absolute","zIndex":"8000"
});
reModel();
$(window).bind("resize",function(){reModel();});
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$("#maskLayer").remove();
_obj.hide();
}
});
function reModel(){
var b = docE? docE : document.body,
height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;
$("#maskLayer").css({
"height": height,"width": width
});
};
}

标签: 弹出层

实例下载地址

Jquery 弹出层 示例源码下载

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

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

网友评论

发表评论

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

查看所有0条评论>>

小贴士

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

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

关于好例子网

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

;
报警