fancybox ne charge pas le contenu correctement

Question

Donc, je suis en ajoutant une div au corps et cette div apparaîtra sur le clic de sur l'image a tag effectivement. Pour obtenir l'effet de superposition, j'utilise fancybox. Cependant, je suis capable d'ajouter le div à body, mais ce div ne se charge pas en fancybox. Quelqu'un peut-il aider ici:

Mon code est ici:

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

plus que je manque quelque chose dans le fancybox, je suis pas non plus vu la croix près dans le coin supérieur droit de fancybox en chrome et en cliquant n'importe où sur fancybox ferme juste la fancybox, ce qui ne devrait pas être le cas.

Answer 1

Voici un code que vous pouvez utiliser pour créer une superposition:

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(); 
    } 
} 

Et vous l'appelez comme ceci:

$(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 
});