JavaScript实现弹窗效果代码分析


Posted in Javascript onMarch 09, 2017

效果图:

JavaScript实现弹窗效果代码分析

话不多说,请看代码:

每个弹窗的标识
var x =0;
var idzt = new Array();
var Window = 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, 是否移动
  };
 加载弹出窗口
 var w = ($(window).width()-this.config.width)/2;
 var h = ($(window).height()-this.config.height)/2;
 var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; left:"+w+"px; top:"+h+"px;'></div>";
 $("body").append(nr);
 加载弹窗标题
 var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";
 加载弹窗内容
 var nrh = this.config.height - 75;
 content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";
 加载按钮
 content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";
 将标题、内容及按钮添加进窗口
 $('#'+idzt[x]).html(content);
 创建遮罩层
 if(this.config.isMask)
 {
  var zz = "<div id='zz'></div>";
  $("body").append(zz);
  $("#zz").css('display','block');
 }
 最大最小限制,以免移动到页面外
 var maxX = $(window).width()-this.config.width;
 var maxY = $(window).height()-this.config.height;
 var minX = 0,
  minY = 0;
 窗口移动
 if(this.config.isDrag)
 {
  鼠标移动弹出窗
  $(".title").bind("mousedown",function(e){
   var n = $(this).attr("bs"); 取标识
   使选中的到最上层
   $(".zhuti").css("z-index",3);
   $('#'+idzt[n]).css("z-index",4);
   取初始坐标
   var endX = 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;
    } else if(endX < 0)
    {
     endX = 0;
    }
    if(endY > maxY)
    {
     endY = maxY;
    } else if(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(){
   var m = this.getAttribute("bs"); 找标识
   $('#'+idzt[m]).remove(); 移除弹窗
   $('#zz').remove(); 移除遮罩 

  })
  x++; 标识增加
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
详解Vue方法与事件
Mar 09 #Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
You might like
PHP 第三节 变量介绍
2012/04/28 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python列表(List)知识点总结
2019/02/18 Python
python搜索包的路径的实现方法
2019/07/19 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python 遍历pd.Series的index和value
2019/11/26 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
基于python代码批量处理图片resize
2020/06/04 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
小学生倡议书范文
2014/05/13 职场文书
文明班级建设方案
2014/05/15 职场文书
汽修专业自荐信
2014/07/07 职场文书
安全先进个人材料
2014/12/29 职场文书
皇城相府导游词
2015/02/06 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python