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 相关文章推荐
一行命令搞定node.js 版本升级
Jul 20 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
node.js文件上传处理示例
Oct 27 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue实现放大镜效果
Sep 17 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
深入理解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学习教程之第1天
2008/06/15 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js格式化时间的方法
2015/12/18 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python requests获取网页常用方法解析
2020/02/20 Python
如何将json数据转换为python数据
2020/09/04 Python
Python项目打包成二进制的方法
2020/12/30 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
优秀中专生推荐信
2013/11/17 职场文书
工作睡觉检讨书
2014/02/25 职场文书
药剂专业求职信
2014/06/20 职场文书
学风建设主题班会
2015/08/17 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python