最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript实现弹窗效果代码分析
时间:2017-06-14 编辑:简简单单 来源:一聚教程网
效果图:
话不多说,请看代码:
代码如下 | 复制代码 |
每个弹窗的标识 varx =0; varidzt =newArray(); varWindow =function(config){ ID不重复 idzt[x] ="zhuti"+x; 弹窗ID 初始化,接收参数 this.config = { width : config.width || 300, 宽度 height : config.height || 200, 高度 buttons : config.buttons ||'', 默认无按钮 title : config.title ||'标题', 标题 content : config.content ||'内容', 内容 isMask : config.isMask ==false?false:config.isMask ||true, 是否遮罩 isDrag : config.isDrag ==false?false:config.isDrag ||true, 是否移动 }; 加载弹出窗口 varw = ($(window).width()-this.config.width)/2; varh = ($(window).height()-this.config.height)/2; varnr =""; $("body").append(nr); 加载弹窗标题 varcontent =" "+this.config.title+" × "; 加载弹窗内容 varnrh =this.config.height - 75; content = content+" "+this.config.content+" "; 加载按钮 content = content+" "+this.config.buttons+" "; 将标题、内容及按钮添加进窗口 $('#'+idzt[x]).html(content); 创建遮罩层 if(this.config.isMask) { varzz =""; $("body").append(zz); $("#zz").css('display','block'); } 最大最小限制,以免移动到页面外 varmaxX = $(window).width()-this.config.width; varmaxY = $(window).height()-this.config.height; varminX = 0, minY = 0; 窗口移动 if(this.config.isDrag) { 鼠标移动弹出窗 $(".title").bind("mousedown",function(e){ varn = $(this).attr("bs"); 取标识 使选中的到最上层 $(".zhuti").css("z-index",3); $('#'+idzt[n]).css("z-index",4); 取初始坐标 varendX = 0, 移动后X坐标 endY = 0, 移动后Y坐标 startX = parseInt($('#'+idzt[n]).css("left")), 弹出层的初始X坐标 startY = parseInt($('#'+idzt[n]).css("top")), 弹出层的初始Y坐标 downX = e.clientX, 鼠标按下时,鼠标的X坐标 downY = e.clientY; 鼠标按下时,鼠标的Y坐标 绑定鼠标移动事件 $("body").bind("mousemove",function(es){ endX = es.clientX - downX + startX; X坐标移动 endY = es.clientY - downY + startY; Y坐标移动 最大最小限制 if(endX > maxX) { endX = maxX; }elseif(endX < 0) { endX = 0; } if(endY > maxY) { endY = maxY; }elseif(endY < 0) { endY = 0; } $('#'+idzt[n]).css("top",endY+"px"); $('#'+idzt[n]).css("left",endX+"px"); window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();//取消选中文本 }); }); 鼠标按键抬起,释放移动事件 $("body").bind("mouseup",function(){ $("body").unbind("mousemove"); }); } 关闭窗口 $(".close").click(function(){ varm =this.getAttribute("bs"); 找标识 $('#'+idzt[m]).remove(); 移除弹窗 $('#zz').remove(); 移除遮罩
}) x++; 标识增加 } |
-
上一个: JavaScript编写一个贪吃蛇游戏
相关文章
- 无线网连接提示没有有效的IP配置解决方法 03-08
- javascript实现下雨效果 07-28
- javascript实现圣旨卷轴展开效果(代码分享) 07-20
- JavaScript实现星星等级评价功能 07-14
- javascript实现滑动解锁功能 07-14
- 十大热门的JavaScript框架和库 07-13