Archive for the 'javascript' Category

April 23
like we need another lightbox
posted by mike at 10:14 am

so I love all the lightbox stuff out there, everyday there seems to be another one popup (pardon the pun) on ajaxian. What I dont like is there dependence on the relation tag, and how complicated they can get. So I made my own SimpleModal.js, basic gist is you call it from js, and you send it what ever content you want in it. This gives me more flexibility say to call some ajax to do a save on lightbox close.

heres the js

PLAIN TEXT
JAVASCRIPT:
  1. function simpleModal(c,s,ci)
  2. {
  3.     this.content = c;
  4.     this.closescript = s;
  5.     this.closeicon =ci;
  6. }
  7. simpleModal.prototype = {
  8.     openWindow:function()
  9.     {
  10.         this.getScroll();
  11.         this.setScroll(0,0);
  12.  
  13.         this.hideSelects(true);
  14.         bod = document.getElementsByTagName('body')[0];
  15.         overlay = document.createElement('div');
  16.         overlay.id  = 'modalOverlay';
  17.         lb  = document.createElement('div');
  18.         lb.id = 'modal';
  19.         lb.innerHTML += '<div style="text-align:right"><a href="javascript:'+this.closescript+';" style="">'+(this.closeicon!=''?'<img src="' + this.closeicon + '" border="0" alt="close" />':'X') + '</a></div>'+this.content;
  20.         
  21.         bod.appendChild(overlay);
  22.         bod.appendChild(lb);
  23.         
  24.         document.getElementById('modal').style.marginLeft=((document.body.clientWidth - document.getElementById('modal').clientWidth)/2)+'px';
  25.         document.getElementById('modal').style.display='block';
  26.       
  27.     }
  28.     ,
  29.     closeWindow:function()
  30.     {
  31.        this.hideSelects(false);
  32.        document.getElementById('modal').style.display='none';
  33.        bod = document.getElementsByTagName('body')[0];
  34.        bod.removeChild(document.getElementById('modalOverlay'));
  35.        bod.removeChild(document.getElementById('modal'));
  36.     }
  37.  
  38.      ,
  39.     // borrowed from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
  40.     /*---------------------------------------------------------------------------------------------*/   
  41.     hideSelects: function(visibility){
  42.         selects = document.getElementsByTagName('select');
  43.         for(i = 0; i <selects.length; i++) {
  44.         try{
  45.             selects[i].style.visibility = visibility;
  46.             }catch(err){}
  47.         }
  48.     },
  49.    
  50.     getScroll: function(){
  51.         if (self.pageYOffset) {
  52.             this.yPos = self.pageYOffset;
  53.         } else if (document.documentElement && document.documentElement.scrollTop){
  54.             this.yPos = document.documentElement.scrollTop;
  55.         } else if (document.body) {
  56.             this.yPos = document.body.scrollTop;
  57.         }
  58.     },
  59.    
  60.     setScroll: function(x, y){
  61.         window.scrollTo(x, y);
  62.     }
  63.    
  64.     /*----------------------------------------------------------------------------------------------*/
  65.    
  66. }

heres the css

PLAIN TEXT
HTML:
  1. #modalOverlay{
  2.     position:absolute;
  3.     top:0;
  4.     left:0;
  5.     width:100%;
  6.     height:100%;
  7.     z-index:5000;
  8.     background-color:#000;
  9.     -moz-opacity: 0.8;
  10.     opacity:.80;
  11.     filter: alpha(opacity=80);
  12. }
  13.  
  14. #modalOverlay[id]{
  15.     position:fixed;
  16. }
  17.  
  18. #modal{
  19.     position: absolute;
  20.     z-index:9999;
  21.     height:inherit;
  22.     border:10px solid #555555;
  23.     background:#FDFCE9;
  24.     text-align:left;
  25.     top: 40px;
  26.     left: 0;
  27.     width: inherit;
  28.     margin: 0 auto;
  29.     disply:none;
  30. }
  31.  
  32. #modal[id]{
  33.     position:fixed;
  34. }

and some implementation code

PLAIN TEXT
JAVASCRIPT:
  1. var uploader = new simpleModal('<iframe src="uploadfile.aspx" width="300" height="200" />','CloseUploadFile()','images/close.gif');
  2.  
  3. function UploadFile()
  4. {
  5.      uploader.openWindow();
  6. }
  7.              
  8. function CloseUploadFile()
  9. {
  10.     uploader.closeWindow();
  11.     <%=this.UpdateJS%>;
  12.     //in my case UpdateJS makes an Asp.Net Ajax postback
  13. }

No Comments || Topcs: General, ajax, .net, javascript