js实现弹窗插件功能实例代码分享


Posted in Javascript onDecember 12, 2013

目前测试下:支持IE6+ 火狐 谷歌游览器等。

先来看看此组件的基本配置项:如下:

this.config = {
 targetCls   :   '.clickElem',   // 点击元素
 title:  '我是龙恩',      // 窗口标题
 content     :  'text:<p style="width:100px;height:100px">我是龙</p>',
 //content            :  'img:http://www.baidu.com/a.jpg',
// 窗口内容 {text:具体内容 | id:id名 | img:图片链接 | 
 // iframe:src链接} {string}  
 width:  400,      // 内容的宽度
 height      :  300,      // 内容的高度
 theight     :  30,// 标题的高度 默认为30
 drag :  true,     // 是否可以拖动 默认为true
 time :  3000,     // 自动关闭窗口的时间 为空或者'undefined'则不关闭
 showBg      :  true,     // 设置是否显示遮罩层 默认为true 遮罩
 closable    :  '#window-close', // 关闭按钮
 bgColor     :  '#000',   // 默认颜色
 opacity     : 0.5,// 默认透明度
 position    : {
     x: 0,
     y: 0   //默认等于0 居中
 },
 zIndex      :     10000,
 isScroll    : true,      //默认情况下 窗口随着滚动而滚动
 isResize    : true,      // 默认情况下 随着窗口缩放而缩放
 callback    : null//弹窗显示后回调函数
    };

JS编写简单的弹窗插件(含有demo和源码)
2013-12-11 22:30 by 龙恩0707, 409 阅读, 1 评论, 收藏, 编辑
 最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自己的弹窗思路,当然我这个可能实现了基本功能,那么如果想做的更好 更完善需要以后继续优化!如果有不足之处!请大家多多谅解!

由于弹窗大家都知道是个什么样的 所以这次没有做演示效果图!目前测试下:支持IE6+ 火狐 谷歌游览器等。

先来看看此组件的基本配置项:如下:

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码
1. 支持配置标题 内容,标题的高度 内容的宽度和高度 窗口是否可以拖动 弹窗后是否自动关闭 是否显示遮罩背景 颜色 及 透明度的配置,及窗口的展示位置 默认x轴0 y轴0是居中对齐,也可以自己配置x轴  y轴的位置 但是要注意是相对于父元素那个X轴 y轴 如果不指定父元素的相对定位 那么默认情况下会相对于document的。当然窗口内容的宽度和高度不建议超过游览器的一屏幕的宽度和高度 尽量小于第一屏的宽度和高度 因为我以前用别人的弹窗插件会存在点击关闭按钮后 由于游览器有滚动条 点击后触发滚动条事件 导致关闭不了窗口 如果内容宽度和高度很大的话 也没有关系 窗口自动会出现滚动条的。

2. 窗口的内容配置项 支持四种 1.text(文本) 可以如下配置 text:<p style="width:100px;height:100px">我是龙恩</p>

    2. img(图片) 可以如下配置 img:http://www.baidu.com/a.jpg

    3. id(id节点)  可以如下配置 'id:XX'

    4. iframe   可以如下配置 'iframe:http://www.baidu.com(iframe地址)'

3. 提供弹窗后回调函数: 如弹窗后可以做自己想做的事情。

所以弹窗组件也没有什么好说的 当然如果要用到自己的项目中 css样式可以自己重新写的,我JS并没有写死掉 只是完成JS基本弹窗业务功能。

HTML代码如下:

<div class="clickElem" style="margin-top:10px;">我是龙恩 请点击我</div>
<div class="clickElem" style="margin-top:10px;">我是龙恩 请点击我</div>

CSS代码如下

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif;}
    label{cursor:pointer;}    #window-box{border:5px solid #E9F3FD;background:#FFF;}
    .windown-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;}
    .window-title h2{padding-left:5px;font-size:14px;color:#666;}
    #window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px no-repeat;cursor:pointer;}
    #window-content-border{padding:5px 0 5px 5px;}

</style>

JS代码如下

/**
 * 编写JS弹窗组件
 * @date 2013-12-10
 * @author tugenhua
 * @email 879083421@qq.com
 */
 function Overlay(options){
    this.config = {
 targetCls   :   '.clickElem',   // 点击元素
 title:  '我是龙恩',      // 窗口标题
 content     :  'text:<p style="width:100px;height:100px">我是龙恩</p>',
 //content     :  'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
     // 窗口内容 {text:具体内容 | id:id名 | img:图片链接 | 
     // iframe:src链接} {string}  
 width:  400,      // 内容的宽度
 height      :  300,      // 内容的高度
 theight     :  30,// 标题的高度 默认为30
 drag :  true,     // 是否可以拖动 默认为true
 time :  3000,     // 自动关闭窗口的时间 为空或者'undefined'则不关闭
 showBg      :  true,     // 设置是否显示遮罩层 默认为true 遮罩
 closable    :  '#window-close', // 关闭按钮
 bgColor     :  '#000',   // 默认颜色
 opacity     : 0.5,// 默认透明度
 position    : {
     x: 0,
     y: 0   //默认等于0 居中
 },
 zIndex      :     10000,
 isScroll    : true,      //默认情况下 窗口随着滚动而滚动
 isResize    : true,      // 默认情况下 随着窗口缩放而缩放
 callback    : null//弹窗显示后回调函数
    };
    this.cache = {
 isrender     :    true,     // 弹窗html结构只渲染一次
 isshow:    false,    // 窗口是否已经显示出来
 moveable     :    false
    };
    this.init(options);
 }
 Overlay.prototype = {
    constructor: Overlay,
    init: function(options){
 this.config = $.extend(this.config,options || {});
 var self = this,
     _config = self.config,
     _cache = self.cache;
 $(_config.targetCls).each(function(index,item){
     $(item).unbind('click');
     $(item).bind('click',function(){
  // 渲染弹窗HTML结构
  self._renderHTML();
  // 窗口移动 
  self._windowMove();
     });
 });
 // 窗口缩放
 self._windowResize('#window-box');
 // 窗口随着滚动条一起滚动
 self._windowIsScroll('#window-box');

    },
    /*
     * 渲染弹窗HTML结构
     */
    _renderHTML: function(){
 var self = this,
     _config = self.config,
     _cache = self.cache;
 var html ='';
 if(_cache.isrender) {
     html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' + 
      '<div id="window-box" style="display:none;overflow:hidden;">' +
   '<div class="window-title"><h2></h2><span id="window-close">关闭</span></div>'+
   '<div id="window-content-border"><div id="window-content"></div></div>' + 
      '</div>';
     $('body').append(html);
     $("#windowbg").css('z-index',_config.zIndex);
     $('#window-content-border').css({'width':_config.width + 'px','height':_config.height + 'px','overflow':'auto'});
     $('.window-title h2').html(_config.title);
     $('.window-title').css({'height':_config.theight + 'px','width':_config.width,'overflow':'hidden'});
     _cache.isrender = false;
     // 判断传递进来的内容格式
     self._contentType();
     if(_config.showBg) {
  // 渲染背景宽度和高度
  self._renderDocHeight();
  $("#windowbg").show();
  self.show();
     }else {
  $("#windowbg").hide();
  self.show();
     }
     self._showDialogPosition("#window-box");
  }else {
     // 如果弹窗已经创建出来的话, 只是隐藏掉了, 那么我们显示出来
     self.show();
     $("#windowbg").animate({"opacity":_config.opacity},'normal');
     if(_config.showBg) {
  $("#windowbg").show();
     }
     self._showDialogPosition("#window-box");
  }
  $(_config.closable).unbind('click');
  $(_config.closable).bind('click',function(){
     // 点击关闭按钮
     self._closed();
  });
  // 渲染后 回调函数
  _config.callback && $.isFunction(_config.callback) && _config.callback();
    },
    /**
     * 显示弹窗
     */
     show: function(){
 var self = this,
     _config = self.config,
     _cache = self.cache;
 $("#window-box") && $("#window-box").show();
 _cache.isshow = true;
 if(_config.time == '' || typeof _config.time == 'undefined') {
     return;
 }else {
     t && clearTimeout(t);
 var t = setTimeout(function(){
  self._closed();
     },_config.time);
 }
     },
     /**
      * 隐藏弹窗
      */
     hide: function(){
 var self = this,
     _cache = self.cache;
 $("#window-box") && $("#window-box").hide();
 _cache.isshow = false;
     },
     /**
      *    判断传进来的内容类型
      */
     _contentType: function(){
 var self = this,
     _config = self.config,
     _cache = self.cache;
 var contentType =  _config.content.substring(0,_config.content.indexOf(":")),
     content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
 switch(contentType) {
     case 'text': 
  $('#window-content').html(content);
     break;
     case 'id':
  $('#window-content').html($('#'+content).html());
     break;
     case 'img':
  $('#window-content').html("<img src='"+content+"' class='window-img'/>");
     break;
     case 'iframe':
  $('#window-content').html('<iframe src="'+content+'" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>');
  $("#window-content-border").css({'overflow':'visible'});
     break;
 }
     },
     /**
      * 点击关闭按钮
      */
     _closed: function(){
 var self = this,
     _config = self.config,
     _cache = self.cache;
 if(_cache.isshow) {
     self.hide();
 }
 if(_config.showBg) {
     $("#windowbg").hide();
 }
 $("#windowbg").animate({"opacity":0},'normal');
     },
     /**
      * 显示弹窗的位置 默认情况下居中
      */
     _showDialogPosition: function(container) {
  var self = this,
      _config = self.config,
      _cache = self.cache;
  $(container).css({'position':'absolute','z-index':_config.zIndex + 1});
  var offsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(),
      offsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft();
  // 判断x,y位置默认是不是等于0 如是的话 居中 否则 根据传进来的位置重新定位
 if(0 === _config.position.x && 0 === _config.position.y){
     $(container).offset({'top':offsetTop, 'left':offsetLeft});
 }else{
     $(container).offset({'top':_config.position.y,'left':_config.position.x});
 }
     },
     /**
      * 渲染底部背景的高度
      */
      _renderDocHeight: function(){
  var self = this,
      _config = self.config;
  $("#windowbg").animate({"opacity":_config.opacity},'normal');
  if(self._isIE6()){
     $("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+"px"});
  }else {
     $("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+"px"});
  }
      },
      /*
* 窗口缩放
*/
      _windowResize: function(elem){
  var self = this,
      _config = self.config;
  $(window).unbind('resize');
  $(window).bind('resize',function(){
      t && clearTimeout(t);
      var t = setTimeout(function(){
   if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
   }
      },200);
  });
      },
    /**
     * 窗口是否随着滚动条一起滚动
     */
     _windowIsScroll: function(elem){
 var self = this,
     _config = self.config;
 $(window).unbind('scroll');
 $(window).bind('scroll',function(){
     t && clearTimeout(t);
      var t = setTimeout(function(){
   if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
   }
      },200);
 });
     },
     /**
      * 窗口移动
      */
     _windowMove: function(){
 var self = this,
     _config = self.config,
     _cache = self.cache;
 var mouseX = 0,
     mouseY = 0;
 $('.window-title').mouseenter(function(){
     $(this).css({'cursor':'move'});
 });
 $('.window-title').mouseleave(function(){
     $(this).css({'cursor':'default'});
 });
 $('.window-title').mousedown(function(e){
     _cache.moveable = true;
     mouseX = e.clientX - $(this).offset().left;
     mouseY = e.clientY - $(this).offset().top;
     $('.window-title').css({'cursor':'move'});
 });
 $(document).mouseup(function(){
     if(!_cache.moveable) {
  return;
     }
     $('.window-title').css({'cursor':'default'});
     _cache.moveable = false;
 });
 $('#window-box').mousemove(function(e){
     if(_cache.moveable) {
  $(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
     }
 });
     },
     /*
      * 判断是否是IE6游览器
      * @return {Boolean}
      */
     _isIE6: function(){
 return navigator.userAgent.match(/MSIE 6.0/)!= null;
     }
 };

 

Javascript 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 #Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 #Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 #Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 #Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 #Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 #Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 #Javascript
You might like
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
JS简单实现数组去重的方法分析
2017/10/14 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python入门教程 python入门神图一张
2018/03/05 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
简单了解Python生成器是什么
2019/07/02 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python删除某个目录文件夹的方法
2020/05/26 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
遗产继承公证书
2014/04/09 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Python进程间的通信之语法学习
2022/04/11 Python