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

Aupa siempre he tenido pendiente el poder hacer una ventana modal, pues aquí lo tenéis:

http://zital.no-ip.org/probak/zmodal/

El css:
Código css:
Ver original
  1. #zmodal .background
  2. {
  3.     z-index: 10;
  4.     background-color: #000;
  5.     position: absolute;
  6.     opacity: 0.5;
  7.     filter: alpha(opacity="50");
  8. }
  9. #zmodal .modal
  10. {
  11.     z-index: 11;
  12.     background-color: #fff;
  13.     position: absolute;
  14.     height: 100%;
  15.     border: 1px solid black;
  16.     padding: 5px;
  17. }
  18. #zmodal .title
  19. {
  20.     color: #fff;
  21.     background-color: #000;
  22.     overflow: hidden;
  23.     padding: 5px;
  24.     width: 100%;
  25. }
  26. #zmodal .title span
  27. {
  28.     text-align: right;
  29. }
  30. #zmodal .out
  31. {
  32.     width: 100%;
  33.     height: 100%;
  34.     overflow: hidden;
  35. }
  36. #zmodal .in
  37. {
  38.     overflow: auto;
  39. }
  40. #zmodal .close img
  41. {
  42.     position: absolute;
  43.     width: 25px;
  44.     height: 29px;
  45.     padding: 0;
  46.     cursor: pointer;
  47.     display: inline;
  48.     right: -8px;
  49.     top: -8px;
  50.     z-index: 12;
  51. }

y el js:

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.  
  25.     // public events
  26.  
  27.     // main event
  28.     zmodal.prototype.main = function()
  29.     {
  30.         // get browser
  31.         this.browser = getBrowser();
  32.         // set new events for web
  33.         setEvents.call(this);
  34.         // set modal window
  35.         setModal.call(this);
  36.     };
  37.    
  38.     // event to redefine, whe close modal do this
  39.     zmodal.prototype.onClose = function(){};
  40.  
  41.     // private events  
  42.    
  43.     // set Modal window
  44.     var setModal = function()
  45.     {
  46.         // create main div and add to page
  47.         var div = document.createElement('div');
  48.         div.id = 'zmodal';
  49.         document.body.appendChild(div);
  50.        
  51.         // create background div
  52.         this.background = document.createElement('div');
  53.         this.background.className = 'background';
  54.  
  55.         // create modal div
  56.         this.modal = document.createElement('div');
  57.         this.modal.className = 'modal';
  58.  
  59.         // set modal position
  60.         setPosition.call(this);
  61.  
  62.         // add divs to modal div
  63.         div.appendChild(this.background);
  64.         div.appendChild(this.modal);
  65.  
  66.         // set Modal Content
  67.         setModalContent.call(this, this.type, this.content);
  68.     };
  69.  
  70.     // set Modal position
  71.     var setPosition = function()
  72.     {
  73.         // get Scroll positions
  74.         var scroll = getScroll();
  75.         // get page width
  76.         var width = getPageSize('width');
  77.         // get page height
  78.         var height = getPageSize('height');
  79.         // set background position
  80.         setBackgroundPosition.call(this, this.background, scroll, width, height);
  81.         // set modal position
  82.         setModalPosition.call(this, this.modal, scroll, width, height);
  83.     };
  84.  
  85.     // set background position
  86.     var setBackgroundPosition = function(elem, scroll, width, height)
  87.     {
  88.         // depend of scroll position
  89.         elem.style.left = scroll[0]+"px";
  90.         elem.style.top = scroll[1]+"px";
  91.         // if browser internet explorer
  92.         if(this.browser==='msie')
  93.         {
  94.             elem.style.width = width+"px";
  95.             elem.style.height = height+"px";
  96.         }
  97.         // no ie browser
  98.         else
  99.         {
  100.             elem.style.width = '100%';
  101.             elem.style.height = '100%';
  102.         }
  103.     };
  104.  
  105.     // set Modal position
  106.     var setModalPosition = function(elem, scroll, width, height)
  107.     {
  108.         elem.style.width = this.width+"px";
  109.         elem.style.height = this.height+"px";
  110.         elem.style.left = scroll[0]+(width-this.width)/2+"px";
  111.         elem.style.top = scroll[1]+(height-this.height)/2+"px";
  112.     };
  113.  
  114.     // set modal content
  115.     var setModalContent = function(type, content)
  116.     {
  117.         // add close img
  118.         setCloseImg.call(this);
  119.  
  120.         // modal out div (overflow: hidden)
  121.         var _out = document.createElement('div');
  122.         _out.className = 'out';
  123.         this.modal.appendChild(_out);
  124.  
  125.         // modal in div (overflow: auto)
  126.         var _in = document.createElement('div');
  127.         _in.className = 'in';
  128.         if(this.title!==undefined)
  129.         {
  130.             // set title to out div
  131.             setTitle(_out, this.title);
  132.             var titlediv = getByClass(document.getElementById('zmodal'), 'title');
  133.             // get title Height: is necessary to be added to web before get Height
  134.             var titleHeight = getSize(titlediv, 'height');
  135.             // substract title height to 'in' div
  136.             _in.style.height = (this.height-titleHeight)+"px"; 
  137.         }
  138.         // if no title full height
  139.         else
  140.             _in.style.height = this.height+"px";
  141.        
  142.         // full width
  143.         _in.style.width = this.width+"px";
  144.         // add in div to out div
  145.         _out.appendChild(_in);
  146.  
  147.         // modal content types
  148.         if(type==='html')
  149.             _in.innerHTML = content;
  150.         else if(type==='dom')
  151.             _in.appendChild(content);
  152.         // get DOM ID content and put in the modal, onclose restore div
  153.         else if(type==='id')
  154.             setElementChilds(_in, document.getElementById(content).childNodes);
  155.     };
  156.    
  157.     // set Modal title to out div
  158.     var setTitle = function(elem, title)
  159.     {
  160.         var div = document.createElement('div');
  161.         div.className = 'title';
  162.         var span = document.createElement('span');
  163.         span.appendChild(document.createTextNode(title));
  164.         div.appendChild(span);
  165.         elem.appendChild(div);
  166.     };
  167.  
  168.     // get Scroll info
  169.     var getScroll = function()
  170.     {
  171.         var scroll = [];
  172.         if (self.pageYOffset)
  173.         {
  174.             scroll[0] = self.pageXOffset;
  175.             scroll[1] = self.pageYOffset;
  176.         }
  177.         else if (document.documentElement && document.documentElement.scrollTop)
  178.         {
  179.             scroll[0] = document.documentElement.scrollLeft;
  180.             scroll[1] = document.documentElement.scrollTop;
  181.         }
  182.         else if (document.body)
  183.         {
  184.             scroll[0] = document.body.scrollLeft;
  185.             scroll[1] = document.body.scrollTop;
  186.         }
  187.         return scroll;
  188.     };
  189.  
  190.     // set Events to page
  191.     var setEvents = function()
  192.     {
  193.         var t = this;
  194.         t.events = [];
  195.         // get old Events and save
  196.         t.events[0] = window.onscroll;
  197.         t.events[1] = window.onresize;
  198.         // set new events
  199.         window.onscroll = function()
  200.         {
  201.             setPosition.call(t);
  202.         };
  203.         window.onresize = function()
  204.         {
  205.             setPosition.call(t);
  206.         };
  207.     };
  208.    
  209.     // restore page old events
  210.     var restoreEvents = function(t)
  211.     {
  212.         window.onscroll = t.events[0];
  213.         window.onresize = t.events[1];
  214.     }
  215.  
  216.     // get page size by type
  217.     var getPageSize = function(type)
  218.     {
  219.         var a;
  220.         if(type==='width')
  221.         {
  222.             if (window.innerWidth!=window.undefined) a = window.innerWidth;
  223.             else if (document.compatMode=='CSS1Compat') a = document.documentElement.clientWidth;
  224.             else if (document.body) a = document.body.clientWidth;
  225.             else a = window.undefined;
  226.         }
  227.         else if(type==='height')
  228.         {
  229.             if (window.innerHeight!=window.undefined) a = window.innerHeight;
  230.             else if (document.compatMode=='CSS1Compat') a = document.documentElement.clientHeight;
  231.             else if (document.body) a = document.body.clientHeight;
  232.             else a = window.undefined;
  233.         }
  234.         return a;
  235.     };
  236.  
  237.     // get Element size in page
  238.     var getSize = function(elem, type)
  239.     {
  240.         if(type==='width')
  241.             return (elem.offsetWidht || elem.style.pixelWidth);
  242.         else if(type==='height')
  243.         {
  244.             return (elem.offsetHeight || elem.style.pixelHeigth);
  245.         }
  246.     };
  247.  
  248.     // get browser type
  249.     var getBrowser = function()
  250.     {
  251.         var a;
  252.         if(navigator.appName==='Microsoft Internet Explorer')
  253.             a = 'msie';
  254.         else
  255.             a = 'default';
  256.         return a;
  257.     };
  258.  
  259.     // set close button
  260.     var setCloseImg= function()
  261.     {
  262.         var t = this;
  263.         var div = document.createElement('div');
  264.         div.className = 'close';
  265.         var img = document.createElement('img');
  266.         img.src = 'img/x-trans.png';
  267.         img.title = 'close';
  268.         img.alt = 'close';
  269.        
  270.         // add event
  271.         img.onclick = function()
  272.         {
  273.             privateClose(t);
  274.         };
  275.         // if ie browser fix PNG
  276.         if(t.browser==='msie')
  277.             img = fixPng(img);
  278.         div.appendChild(img);
  279.         t.modal.appendChild(div);
  280.     };
  281.  
  282.     // remove element from page
  283.     var removeElement = function(elem)
  284.     {
  285.         elem.parentNode.removeChild(elem);
  286.     };
  287.  
  288.     // fix png for ie6
  289.     var fixPng = function(img)
  290.     {
  291.         var png = /\.png$/i;
  292.         if(png.test(img.src))
  293.         {
  294.             img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""+img.src+"\",sizingMethod=\"image\")";
  295.             img.src = 'img/trans.gif';
  296.         }
  297.         return img;
  298.     };
  299.  
  300.     // add childs to element
  301.     var setElementChilds = function(elem, obj)
  302.     {
  303.         var len = obj.length;
  304.         for(var i=0;i<len;i++)
  305.             elem.appendChild(obj[i]);
  306.     };
  307.  
  308.     // onclose private method
  309.     var privateClose = function(t)
  310.     {
  311.         var zmodal = document.getElementById('zmodal');
  312.         // if type ID restore ID content to div
  313.         if(t.type==='id')
  314.         {
  315.             var _in = getByClass(zmodal, 'in');
  316.             setElementChilds(document.getElementById(t.content), _in.childNodes);
  317.         }
  318.         // remove modal
  319.         removeElement(zmodal);
  320.         // restore events
  321.         restoreEvents(t);
  322.         // execute public onClose method
  323.         t.onClose();
  324.     };
  325.  
  326.     // get element by class (only returns 1)
  327.     var getByClass = function(elem, _class)
  328.     {
  329.         var childs = elem.childNodes;
  330.         var len = childs.length;
  331.         for(var i=0;i<len;i++)
  332.             if(childs[i].className===_class)
  333.                 return childs[i];
  334.             else if(childs[i].hasChildNodes())
  335.                 var a = getByClass(childs[i], _class);
  336.         return a;
  337.     };
  338. };

por ahora funciona en IE6, IE7, firefox3, arora, chrome/iron, en konqueror no funciona el onscroll pero por lo demás sí.

Para terminar quisiera darle las gracias a:gabrito.com por su código en el que me he basado.

http://gabrito.com/files/subModal/

DEMO funcionando:

http://zital.no-ip.org/probak/zmodal/
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan

Última edición por ZiTAL; 30/09/2009 a las 08:09 Razón: caricatos tiene razon :)