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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
react路由配置方式详解
Aug 07 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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编程中八种常见的文件操作方式
2006/11/19 PHP
php入门小知识
2008/03/24 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
详解python中*号的用法
2019/10/21 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
一些Unix笔试题和面试题
2013/01/22 面试题
公司前台辞职报告
2014/01/19 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
法制宣传实施方案
2014/03/13 职场文书
预备党员介绍人意见
2015/06/01 职场文书
埃及王子观后感
2015/06/16 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
python 安全地删除列表元素的方法
2022/03/16 Python