AJAX and Custom Dialogs

Revision as of 15:09, 16 November 2010 by Dinsley (talk | contribs)

Here we will go through the steps to create custom lightbox popups for your site. A lightbox is like a traditional popup box, but it doesn't appear in a separate frame or window. These are used throughout the website builder editor, such as when you edit the settings of any component. Fortunately, this is easy to do!

Before you Start

We recommend you save a backup of your theme before starting in case you don't like the changes made. Alternately, you can remove the code added, but saving a backup provides extra security and is a good practice in general. It is also likely a quicker way to revert to a previous state.


Getting Started

This will require the addition of small amounts of 4 different code types to various sections within the theme's source code - HTML, CSS, AJAX, and JavasScript. We recommend you save a backup of your theme, make a copy of the backup, then make these changes to it. When complete, you will want to upload the modified theme.

Step 1 - HTML

When ready, first we need to add some HTML code to our theme's default.html file.

You will want to add this to the <body> tag area specifically: 

<div class="window" id="content-dialog">
  <div id="dialog-content"></div>
  <div id="dialog-controls">
    <a href="/#" class="close">Close</a>
  </div>
</div>
<div id="mask"></div>

Step 2 - CSS

This CSS code is how we hide the dialog from being seen at all times, and how we style it to look nice. For the most part, you can leave this how it is, but you'll probably want to modify the colours to match your site. This code will need to be added to your theme's style.css file. 


#mask {
  position: absolute;
  z-index: 9000;
  background-color: #000;
  display: none;
}
#content-dialog {
  position: absolute;
  width: 550px;
  height: 500px;
  z-index: 9999;
  padding: 10px 13px;
  display: none;
  background-color: #23201B;
  font-size: 90%;
}
#content-dialog a {
  color: #FE8D2F;
}
#content-dialog #dialog-controls {
  text-align: right;
  padding: 10px;
}
#dialog-content {
  overflow: auto;
  height: 455px;
}


Step 3 - AJAX

The AJAX part is actually quite simple thanks to this article. We use jQuery to load a page, then grab the content we want using a selector. We are using $j instead of $ because the jQuery we provide is in a no-conflict mode. This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named site.js added to your theme's /assets/ folder. The code you will need to add is: 


// Load a new page and place it in the dialog
function loadPage( page ) {
  $j('#dialog-content').load( page + ' #location_0 > *', function() { $j('#location_0');});
}


Step 4 - JavaScrip

The last step is to add this JavaScript code. All of it will need to be added, however we have broken it into segments here to explain what each part does. This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named site.js added to your theme's /assets/ folder.

This first piece of code is going to execute once the page has finished loading. It'll call the other two functions to setup the links and dialog so everything will work: 


$j( document ).ready( function() {
  setupLinks();
  setupDialog();
});


This next bit of code will only need one small change, and that's the selector. In this example, we created a custom code block which was just a list of links to the pages we wanted to load. You'll need to do the same. The reason we use this example is so that if JavaScript is disabled, the visitor can still get to those other pages. For the most part, all this code does is find out where to position the dialog and show it. You can also tweak the fade-in and fade-out times if you'd like: 


function setupLinks() {
  $j('#linkHolder ul li a').click( function(e) {
    // prevent default link action
    e.preventDefault();
    
    // Hide the scrollbars
    $j('body').css('overflow', 'hidden');
    
    // clear the dialog content
    $j('#dialog-content').empty();
    // start loading the new content
    loadPage( $j(this).attr('href') );
    // open the new dialog
    var id = '#content-dialog';  

    //Get the screen height and width  
    var maskHeight = $j(document).height();  
    var maskWidth = $j(window).width();  

    //Set height and width to mask to fill up the whole screen  
    $j('#mask').css({'width':maskWidth,'height':maskHeight,'top':0,'left':0});  

    //transition effect       
    $j('#mask').fadeIn(300);      
    $j('#mask').fadeTo("fast",0.8);    

    //Get the window height and width  
    var winH = $j(window).height();  
    var winW = $j(window).width();  

    //Set the popup window to center  
    $j(id).css('top',  parseInt((winH/2-$j(id).height()/2) + $j(document).scrollTop()));  
    $j(id).css('left', winW/2-$j(id).width()/2);  

    //transition effect  
    $j(id).fadeIn(500);
  });
}


This last bit of code just tells the dialog to close itself. It registers listeners on the close button and the semi-transparent mask to see when they're clicked. As soon as they're clicked, it hides both the mask and the dialog. 


function setupDialog() {
  //if close button is clicked  
  $j('.window .close').click(function (e) {  
      //Cancel the link behavior  
      e.preventDefault();  
      $j('#mask, .window').hide();
      $j('body').css('overflow', 'auto');
  });       
  //if mask is clicked  
  $j('#mask').click(function () {  
      $j(this).hide();  
      $j('.window').hide();
      $j('body').css('overflow', 'auto');
  });
}


To link to the JavaScript file in your theme, you'll need to add this to the <head> tag of your theme file: 


  <script src="/assets/site.js" type="text/javascript"></script>
Retrieved from "https://wiki.bravesites.com/index.php?title=AJAX_and_Custom_Dialogs&oldid=3626"