Ivan Porto Carrero

I’ve been using the jquery library in conjunction with castle lately. And to display sub content of a page i need something to show the page in. Like a modal dialog box

I found the greybox plugin but it wasn’t quite what I was looking for. So I added a couple of features to it.  The code is below. For the stylesheet etc I suggest you visit the original greybox script.

 /* Greybox Redux II
 * Written by : Ivan Porto Carrero
 * I changed the greybox code so that it would support ajax instead of an iframe.
 * You need the interface elements 
 * Required: http://jquery.com/
 * Written by: John Resig
 * Based on code by: 4mir Salihefendic (http://amix.dk)
 * License: LGPL (read more in LGPL.txt)
 */

var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;

function GB_show(caption, url, height, width, hideOnWindowClick) {
  GB_HEIGHT = height || 400;
  GB_WIDTH = width || 400;
  if(!GB_DONE) {
    $(document.body)
      .append("




"
        + "



");
    $("#GB_window img").click(GB_hide);

    if(hideOnWindowClick)
      $("#GB_overlay").click(GB_hide);

    $(window).resize(GB_position);
    GB_DONE = true;
  }

  $('#GB_overlay').hide();
  $('#GB_window').hide();

  if(url)
    $('#GB_Content').load(url,null,function(request){helpers.initPage();});

  GB_position();
  if ($().OpenVertically != undefined) // are interface elements supported ?
    $("#GB_window").OpenVertically(500);
  else
    $("#GB_window").slideDown("slow");

  $("#GB_caption").html(caption);
  $("#GB_overlay").show();
  $('#GB_Content').show();
};

function GB_hide() {
    $('#GB_Content').html('').hide();
    if($().CloseVertically != undefined)
        $('#GB_window').CloseVertically(500);
    else
        $('#GB_window').hide('slow');
    setTimeout('$("#GB_overlay").hide();$("#GB_window").hide();',500);
};

function GB_position() {
  var de = document.documentElement;
  var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  $("#GB_window").css({width:GB_WIDTH+"px",height:GB_HEIGHT+"px",
    left: ((w - GB_WIDTH)/2)+"px" });
 };