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 相关文章推荐
javascript 实现 原路返回
Jan 21 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
JS实现可控制的进度条
Mar 25 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
jQuery 源码分析笔记
2011/05/25 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
带你认识Django
2019/01/15 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
房产公证书格式
2015/01/26 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
八一建军节主持词
2015/07/01 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
opencv检测动态物体的实现
2021/07/21 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android