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 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python中range()与xrange()用法分析
2016/09/21 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python中upper是做什么用的
2020/07/20 Python
Python eval函数介绍及用法
2020/11/09 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
DBA的职责都有哪些
2012/05/16 面试题
企业出纳岗位职责
2014/03/12 职场文书
售后服务承诺书
2014/03/26 职场文书
课外小组活动总结
2014/08/27 职场文书
镇创先争优活动总结
2014/08/28 职场文书
团队拓展活动方案
2014/08/28 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书