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 toFixed() 方法
Apr 15 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
解决vue移动端适配问题
Dec 12 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 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.ini 中文版
2006/10/28 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
jquery插件之easing使用
2010/08/19 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
js图片预加载示例
2014/04/30 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python 递归函数详解及实例
2016/12/27 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python调用百度语音REST API
2018/08/30 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
序列化Python对象的方法
2020/08/01 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
成立公司计划书
2014/05/07 职场文书
商场周年庆活动方案
2014/08/19 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
小学元宵节活动总结
2015/02/06 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS