JavaScript & CSS Modal Loading DIV

Jun 17, 2009 in BLOG • CODE
javascript
2 min read

Things I’ve used in this:

Prototype Javascript (http://prototypejs.org/)
Loading image (http://www.ajaxload.info/)
Script & CSS

What I do here is build a DIV element and show it on the page while Prototype’s Ajax Request object is loading. Then, when the Request is finished, the DIV is removed from the document.

Here is the script necessary to make a request and build/show/remove the DIV.

/** Main.js
  * @author Jim Schubert
  * (c) 2009
  */
  
 function showContent(file){
     var content = new Ajax.Request(file,
         {
             method:'get',
              onLoading: showLoading(),
              onSuccess: function(request)
              {
                  var contentDIV = document.getElementById('content');
                  contentDIV.innerHTML = "";
                  contentDIV.innerHTML = request.responseText;    
                  
                  closeLoading();                        
              },
              onFailure: function(){ alert('Cannot process your request.');}
              // onComplete: closeLoading()
          });
  };
   
  function onImgError(source) {
    source.src = "img/img_error.png";
    // disable onerror to prevent endless loop
    source.onerror = "";
    return true;
  };        
   
  function showLoading() {
      // create div element
      var overlayDIV = document.createElement('div');
      var loadingDIV = document.createElement('div');
      overlayDIV.setAttribute('id', 'overlay');
      overlayDIV.setAttribute('class', 'overlay');
      overlayDIV.style.visibility = 'visible';
      
      loadingDIV.setAttribute('id', 'loading');
      loadingDIV.setAttribute('class', 'modalPopup');
      loadingDIV.innerHTML = '<center><img src="img/ajax-loader.gif"><br>Loading...</center>';
          
      overlayDIV.appendChild(loadingDIV);
      var content = document.getElementById('bodyDocument');
      if (content) {
          content.appendChild(overlayDIV);
          var overlay = document.getElementById('overlay');
          if (overlay) {
              overlay.style.visibility = 'visible';
              overlay.style.height = '100%';
          }
      }
      
      return true;
  };
   
  function closeLoading(){
      var overlayDIV = document.getElementById('overlay');
      var loadingDIV = document.getElementById('loading');
      
      if (overlayDIV) {
          if (loadingDIV) {
              overlayDIV.removeChild(loadingDIV);
              document.getElementById('bodyDocument').removeChild(overlayDIV);
          }
          // else {alert("can't find loadingDIV")}
      }
      // else{ alert("Can't find overlay.");}
      
      return true;
  };

Here is the stylesheet needed to make the dialog “modal”.

.overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;    
      filter:alpha(opacity=70) !important;
      opacity:0.8 !important;
      elevation:above !important;
      /* background-color:Gray !important; */
      background-image: url(../img/overlay.png);
  }
   
  .modalPopup 
  {
      display: block;
      margin-left: auto;
      margin-right: auto;    
      width:180px;
      margin: 100px auto;
      background-color:#F1F1F1 !important;
      border:1px solid #000;
      padding:15px;
      text-align:center;
      elevation:above !important;
  }

In order to use this code, you’ll have to give your body tag an id of ‘bodyDocument’, and the div tag to receive your ajax request should be called ‘content’.

I’ve also included an image error detecting script, which replaces broken images with a default image. Unfortunately, if you’re trying to produce 100% compliant HTML documents, this won’t be compliant unless you’re using HTML5.

In order to use this, you’ll have to do something like

<img src='asdf.gif' onerror='javascript:onImgError(this)' alt='image'>

I’ve left some code commented out, which will help in debugging your efforts. And, in the stylesheet, you have the option of using a flat background instead of a PNG with transparency.