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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
javascript html 静态页面传参数
Apr 10 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
Underscore源码分析
Dec 30 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
node跨域请求方法小结
Aug 25 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python实现DDos攻击实例详解
2019/02/02 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
日语系毕业生推荐信
2013/11/11 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL