fancybox no carga el contenido correctamente

Question

Así que estoy agregando un div al cuerpo y este div aparecerá en el clic de la etiqueta de la imagen a en realidad. Para lograr el efecto de superposición del cuerpo, estoy usando fancybox. Sin embargo, puedo agregar el div al cuerpo, pero este div no se carga como un fancybox. Alguien puede ayudar aquí:

Mi código está aquí:

http://jsfiddle.net/refhat/xap9F/60/

Además me estoy perdiendo algo en el FancyBox, estoy también no ver la cruz cerca de la esquina superior derecha de FancyBox en cromo y haciendo clic en cualquier parte de fancybox simplemente cierra el fancybox, que no debería ser el caso.

Answer 1

Aquí hay un código que puede utilizar para crear una superposición:

overlay = function() { 
    var o, c; 
    this.create = function (html) { 
     o = $('<div />'); 
     c = $('<div />'); 
     h = $('<div>' + html + '</div>').appendTo(c); 

     var o_css = { 
      'position': 'absolute', 
      'top': '0', 
      'left': '0', 
      'width': '100%', 
      'height': '100%', 
      'background': '#000', // Background of the overlay (opacity is set later) 
      'z-index': '10000', 
      'overflow': 'hidden' 
     }; 
     var c_css = { 
      'position': 'absolute', 
      'top': '50%', 
      'left': '50%', 
      'width': '300px', // Width of content box 
      'height': '200px', // Height of the content box 
      'margin-left': '-150px', // Half of content width (used to center the box) 
      'margin-top': '-100px', // Half of content height (used to center the box) 
      'background': '#fff', // Background of the content 
      'color': '#000', // Text color 
      'z-index': '10001' 
     }; 
     var h_css = { 'padding': '10px' }; // If you want paddning 

     o.css(o_css); 
     c.css(c_css); 
     h.css(h_css); 

     o.fadeTo(0, 0).appendTo('body').fadeTo(500, 0.5); //0.5 is opacity, change from 0.1-1.0 
     c.fadeTo(0, 0).appendTo('body').fadeTo(500, 1.0); //1.0 is opacity, change from 0.1-1.0 
    } 
    this.remove = function() { 
     o.remove(); 
     c.remove(); 
    } 
} 

Y que lo llaman así:

$(document).ready(function() { 
    o = new overlay(); 
    o.create('HTML you want to fill the container with, example and image or/and text or maybe a link you later bind o.remove() to'); //This creates the overlay 
    o.remove(); // .. and this removes the overlay 
});