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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
javascript 写类方式之四
Jul 05 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JS制作简单的三级联动
Mar 18 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
requireJS使用指南
2016/04/27 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Seajs源码详解分析
2019/04/02 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python实现简单飞行棋
2020/02/06 Python
python GUI计算器的实现
2020/10/09 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
九年级物理教学反思
2014/01/29 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
团支部推优材料
2014/05/21 职场文书
医学求职信
2014/05/28 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
行政撤诉申请书
2015/05/18 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis