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 跨域访问解决方案
Feb 14 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
YII路径的用法总结
2014/07/09 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
javascript常用的方法整理
2015/08/20 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python configparser模块操作代码实例
2020/06/08 Python
python如何提升爬虫效率
2020/09/27 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
中国梦演讲稿3分钟
2014/08/19 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS