Ver Mensaje Individual
  #7 (permalink)  
Antiguo 17/04/2009, 10:43
Avatar de ZiTAL
ZiTAL
 
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 21 años
Puntos: 62
Respuesta: Aporte: zmodal ventana modal

Añadido soporte total para konqueror ;)

Código javascript:
Ver original
  1. /**
  2.  * @author zital
  3.  *
  4.  * zmodal: modal box
  5.  * license: GPL 3.0
  6.  * version: 0.0.1
  7.  * based on subModal: can be downloaded from [url]http://gabrito.com/files/subModal/[/url]
  8.  */
  9.  
  10. var zmodal = function()
  11. {
  12.     // public properties
  13.     this.title;
  14.     this.width;
  15.     this.height;
  16.     this.type;
  17.     this.content;
  18.    
  19.     // private properties
  20.     this.browser;
  21.     this.background;
  22.     this.modal;
  23.     this.events;
  24.     this.hiddeTags = new Array('object', 'embed', 'select');
  25.  
  26.     // konqueror onscroll event
  27.     this.koE;
  28.  
  29.     // public events
  30.  
  31.     // main event
  32.     zmodal.prototype.main = function()
  33.     {
  34.         // hidde elements
  35.         setClassByTags(document.body, this.hiddeTags, 'zhidden', 'add');
  36.         // get browser
  37.         this.browser = getBrowser();
  38.         // set new events for web
  39.         setEvents.call(this);
  40.         // set modal window
  41.         setModal.call(this);
  42.     };
  43.    
  44.     // event to redefine, whe close modal do this
  45.     zmodal.prototype.onClose = function(){};
  46.  
  47.     // private events  
  48.    
  49.     // set Modal window
  50.     var setModal = function()
  51.     {
  52.         // create main div and add to page
  53.         var div = document.createElement('div');
  54.         div.id = 'zmodal';
  55.         document.body.appendChild(div);
  56.        
  57.         // create background div
  58.         this.background = document.createElement('div');
  59.         this.background.className = 'background';
  60.  
  61.         // create modal div
  62.         this.modal = document.createElement('div');
  63.         this.modal.className = 'modal';
  64.  
  65.         // set modal position
  66.         setPosition.call(this);
  67.  
  68.         // add divs to modal div
  69.         div.appendChild(this.background);
  70.         div.appendChild(this.modal);
  71.  
  72.         // set Modal Content
  73.         setModalContent.call(this, this.type, this.content);
  74.     };
  75.  
  76.     // set Modal position
  77.     var setPosition = function()
  78.     {
  79.         // get Scroll positions
  80.         var scroll = getScroll();
  81.         // get page width
  82.         var width = getPageSize('width');
  83.         // get page height
  84.         var height = getPageSize('height');
  85.         // set background position
  86.         setBackgroundPosition.call(this, this.background, scroll, width, height);
  87.         // set modal position
  88.         setModalPosition.call(this, this.modal, scroll, width, height);
  89.     };
  90.  
  91.     // set background position
  92.     var setBackgroundPosition = function(elem, scroll, width, height)
  93.     {
  94.         // depend of scroll position
  95.         elem.style.left = scroll[0]+"px";
  96.         elem.style.top = scroll[1]+"px";
  97.         // if browser internet explorer
  98.         if(this.browser==='msie')
  99.         {
  100.             elem.style.width = width+"px";
  101.             elem.style.height = height+"px";
  102.         }
  103.         // no ie browser
  104.         else
  105.         {
  106.             elem.style.width = '100%';
  107.             elem.style.height = '100%';
  108.         }
  109.     };
  110.  
  111.     // set Modal position
  112.     var setModalPosition = function(elem, scroll, width, height)
  113.     {
  114.         elem.style.width = this.width+"px";
  115.         elem.style.height = this.height+"px";
  116.         elem.style.left = scroll[0]+(width-this.width)/2+"px";
  117.         elem.style.top = scroll[1]+(height-this.height)/2+"px";
  118.     };
  119.  
  120.     // set modal content
  121.     var setModalContent = function(type, content)
  122.     {
  123.         // add close img
  124.         setCloseImg.call(this);
  125.  
  126.         // modal out div (overflow: hidden)
  127.         var _out = document.createElement('div');
  128.         _out.className = 'out';
  129.         this.modal.appendChild(_out);
  130.  
  131.         // modal in div (overflow: auto)
  132.         var _in = document.createElement('div');
  133.         _in.className = 'in';
  134.         if(this.title!==undefined)
  135.         {
  136.             // set title to out div
  137.             setTitle(_out, this.title);
  138.             var titlediv = getByClass(document.getElementById('zmodal'), 'title');
  139.             // get title Height: is necessary to be added to web before get Height
  140.             var titleHeight = getSize(titlediv, 'height');
  141.             // substract title height to 'in' div
  142.             _in.style.height = (this.height-titleHeight)+"px"; 
  143.         }
  144.         // if no title full height
  145.         else
  146.             _in.style.height = this.height+"px";
  147.        
  148.         // full width
  149.         _in.style.width = this.width+"px";
  150.         // add in div to out div
  151.         _out.appendChild(_in);
  152.  
  153.         // modal content types
  154.         if(type==='html')
  155.             _in.innerHTML = content;
  156.         else if(type==='dom')
  157.             _in.appendChild(content);
  158.         // get DOM ID content and put in the modal, onclose restore div
  159.         else if(type==='id')
  160.             setElementChilds(_in, document.getElementById(content).childNodes);
  161.     };
  162.    
  163.     // set Modal title to out div
  164.     var setTitle = function(elem, title)
  165.     {
  166.         var div = document.createElement('div');
  167.         div.className = 'title';
  168.         var span = document.createElement('span');
  169.         span.appendChild(document.createTextNode(title));
  170.         div.appendChild(span);
  171.         elem.appendChild(div);
  172.     };
  173.  
  174.     // get Scroll info
  175.     var getScroll = function()
  176.     {
  177.         var scroll = [];
  178.         if (self.pageYOffset)
  179.         {
  180.             scroll[0] = self.pageXOffset;
  181.             scroll[1] = self.pageYOffset;
  182.         }
  183.         else if (document.documentElement && document.documentElement.scrollTop)
  184.         {
  185.             scroll[0] = document.documentElement.scrollLeft;
  186.             scroll[1] = document.documentElement.scrollTop;
  187.         }
  188.         else if (document.body)
  189.         {
  190.             scroll[0] = document.body.scrollLeft;
  191.             scroll[1] = document.body.scrollTop;
  192.         }
  193.         return scroll;
  194.     };
  195.  
  196.     // set Events to page
  197.     var setEvents = function()
  198.     {
  199.         var t = this;
  200.         t.events = [];
  201.         // get old Events and save
  202.         t.events[0] = window.onresize;
  203.        
  204.         // set new events
  205.         if(t.browser==='konqueror')
  206.         {
  207.             window.onresize = null;
  208.             t.koS = window.setInterval(function()
  209.             {
  210.                 setPosition.call(t);
  211.             }, 250);
  212.         }
  213.         else
  214.         {
  215.             t.events[1] = window.onscroll;
  216.             window.onscroll = function()
  217.             {
  218.                 setPosition.call(t);
  219.             };
  220.         }
  221.         window.onresize = function()
  222.         {
  223.             setPosition.call(t);
  224.         };
  225.     };
  226.    
  227.     // restore page old events
  228.     var restoreEvents = function(t)
  229.     {
  230.         window.onresize = t.events[0];
  231.         if(t.browser==='konqueror')
  232.             clearInterval(t.koS);
  233.         else
  234.             window.onscroll = t.events[1];
  235.     }
  236.  
  237.     // get page size by type
  238.     var getPageSize = function(type)
  239.     {
  240.         var a;
  241.         if(type==='width')
  242.         {
  243.             if (window.innerWidth!=window.undefined) a = window.innerWidth;
  244.             else if (document.compatMode=='CSS1Compat') a = document.documentElement.clientWidth;
  245.             else if (document.body) a = document.body.clientWidth;
  246.             else a = window.undefined;
  247.         }
  248.         else if(type==='height')
  249.         {
  250.             if (window.innerHeight!=window.undefined) a = window.innerHeight;
  251.             else if (document.compatMode=='CSS1Compat') a = document.documentElement.clientHeight;
  252.             else if (document.body) a = document.body.clientHeight;
  253.             else a = window.undefined;
  254.         }
  255.         return a;
  256.     };
  257.  
  258.     // get Element size in page
  259.     var getSize = function(elem, type)
  260.     {
  261.         if(type==='width')
  262.             return (elem.offsetWidht || elem.style.pixelWidth);
  263.         else if(type==='height')
  264.         {
  265.             return (elem.offsetHeight || elem.style.pixelHeigth);
  266.         }
  267.     };
  268.  
  269.     // get browser type
  270.     var getBrowser = function()
  271.     {
  272.         var a;
  273.         if(navigator.appName==='Microsoft Internet Explorer')
  274.             a = 'msie';
  275.         else if(navigator.appName==='Konqueror')
  276.             a = 'konqueror';
  277.         return a;
  278.     };
  279.  
  280.     // set close button
  281.     var setCloseImg= function()
  282.     {
  283.         var t = this;
  284.         var div = document.createElement('div');
  285.         div.className = 'close';
  286.         var img = document.createElement('img');
  287.         img.src = 'img/x-trans.png';
  288.         img.title = 'close';
  289.         img.alt = 'close';
  290.        
  291.         // add event
  292.         img.onclick = function()
  293.         {
  294.             privateClose(t);
  295.         };
  296.         // if ie browser fix PNG
  297.         if(t.browser==='msie')
  298.             img = fixPng(img);
  299.         div.appendChild(img);
  300.         t.modal.appendChild(div);
  301.     };
  302.  
  303.     // remove element from page
  304.     var removeElement = function(elem)
  305.     {
  306.         elem.parentNode.removeChild(elem);
  307.     };
  308.  
  309.     // fix png for ie6
  310.     var fixPng = function(img)
  311.     {
  312.         var png = /\.png$/i;
  313.         if(png.test(img.src))
  314.         {
  315.             img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+img.src+"\",sizingMethod=\"image\")";
  316.             img.src = 'img/trans.gif';
  317.         }
  318.         return img;
  319.     };
  320.  
  321.     // add childs to element
  322.     var setElementChilds = function(elem, obj)
  323.     {
  324.         var len = obj.length;
  325.         for(var i=0;i<len;i++)
  326.             elem.appendChild(obj[i]);
  327.     };
  328.  
  329.     // onclose private method
  330.     var privateClose = function(t)
  331.     {
  332.         var zmodal = document.getElementById('zmodal');
  333.         // if type ID restore ID content to div
  334.         if(t.type==='id')
  335.         {
  336.             var _in = getByClass(zmodal, 'in');
  337.             setElementChilds(document.getElementById(t.content), _in.childNodes);
  338.         }
  339.         // remove modal
  340.         removeElement(zmodal);
  341.         // restore hidden elements
  342.         setClassByTags(document.body, t.hiddeTags, 'zhidden', 'remove');
  343.         // restore events
  344.         restoreEvents(t);
  345.         // execute public onClose method
  346.         t.onClose();
  347.     };
  348.  
  349.     // get element by class (only returns 1)
  350.     var getByClass = function(elem, _class)
  351.     {
  352.         var childs = elem.childNodes;
  353.         var len = childs.length;
  354.         for(var i=0;i<len;i++)
  355.             if(childs[i].className===_class)
  356.                 return childs[i];
  357.             else if(childs[i].hasChildNodes())
  358.                 var a = getByClass(childs[i], _class);
  359.         return a;
  360.     };
  361.     var addClass = function(elem, _class)
  362.     {
  363.         elem.className+= " "+_class;
  364.     };
  365.     var removeClass = function(elem, _class)
  366.     {
  367.         var aClass = elem.className.split(' ');
  368.         var len = aClass.length;
  369.         var tmp = '';
  370.         for(var i=0;i<len;i++)
  371.             if(aClass[i]!==_class)
  372.                 tmp+=" "+aClass[i];
  373.         elem.className = tmp;
  374.     };
  375.     var setClassByTags = function(_parent, aTags, _class, _type)
  376.     {
  377.         var childs = _parent.childNodes;
  378.         var clen = childs.length;
  379.         var tlen = aTags.length;
  380.         for(var i=0;i<clen;i++)
  381.         {
  382.             for(var j=0;j<tlen;j++)
  383.             {
  384.                 if(childs[i].nodeName.toLowerCase()===aTags[j])
  385.                 {
  386.                     if(_type==='add')
  387.                         addClass(childs[i], _class);
  388.                     else if(_type==='remove')
  389.                         removeClass(childs[i], _class);
  390.                 }
  391.                 if(childs[i].hasChildNodes())
  392.                     setClassByTags(childs[i], aTags, _class, _type);
  393.             }
  394.         }      
  395.     };
  396. };
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan