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

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

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

复制代码 代码如下:

this.config = {

 targetCls   :   '.clickElem',   // 点击元素
 title:  '我是龙恩',      // 窗口标题
 content     :  'text:<p style="width:100px;height:100px">我是龙</p>',
 //content            :  'img:yun_qi_img/error.html',
// 窗口内容 {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:yun_qi_img/error.html

    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:yun_qi_img/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;
     }

 };

 

时间： 2025-01-19 20:01:46

js实现弹窗插件功能实例代码分享_javascript技巧的相关文章

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

 这篇文章主要介绍了 目前测试下:支持IE6+ 火狐 谷歌游览器等.   先来看看此组件的基本配置项:如下:   代码如下: this.config = {    targetCls   :   '.clickElem',   // 点击元素  title:  '我是龙恩',      // 窗口标题  content     :  'text:<p style="width:100px;height:100px">我是龙</p>',  //content  

js精美的幻灯片画集特效代码分享_javascript技巧

本文实例讲述了js制作精美的幻灯片画集特效.分享给大家供大家参考.具体如下: 这是一款基于javascript制作的精美幻灯片画集特效的插件,跟其他幻灯片有别的图片画廊.为什么说有所区别呢,因为这款插件的图片切换时包含4个方向的,即上下左右切换也是可以的,大家可以在实例中进行使用. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 本实例的关键代码: var o = { init:

基于JS实现无缝滚动思路及代码分享_javascript技巧

原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图

js图片卷帘门导航菜单特效代码分享_javascript技巧

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re

js仿黑客帝国字母掉落效果代码分享_javascript技巧

看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下,                                      ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt

JS打字效果的动态菜单代码分享_javascript技巧

这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&

JS实现可调整倒计时间代码分享_javascript技巧

这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到"天.时.分.秒",而且样式布局也很新颖. 先上运行效果图: 效果演示     源码下载 为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式). <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

Bootstrap下拉菜单效果实例代码分享_javascript技巧

下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种.  Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站.  对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释.  而且,官方网站的超级链接代码杂糅着许多没有用的参数.

javascript修改表格背景色实例代码分享_javascript技巧

复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行      {