fancybox सामग्री को ठीक से लोड नहीं करता

Question

इसलिए मैं शरीर में एक div जोड़ रहा हूं और यह div वास्तव में छवि a टैग पर क्लिक करने पर पॉपअप करेगा। बॉडी ओवरले प्रभाव को प्राप्त करने के लिए, मैं फैंक्सबॉक्स का उपयोग कर रहा हूं। हालांकि मैं div को शरीर में जोड़ने में सक्षम हूं, लेकिन यह div fancybox के रूप में लोड नहीं होता है। किसी को यहाँ मदद कर सकते हैं:

मेरे कोड यहाँ है:

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

इसके अलावा मैं fancybox में कुछ याद आ रही है, मैं भी नहीं दिखाई दे रहा क्रोम और क्लिक में fancybox के ऊपरी दाएं कोने पर करीब पार फैंक्सबॉक्स पर कहीं भी फैंक्सबॉक्स बंद कर देता है, जो मामला नहीं होना चाहिए।

Answer 1

यहाँ आप एक उपरिशायी बनाने के लिए इस्तेमाल कर सकते हैं कुछ कोड है:

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

और आप इसे इस तरह कहते हैं:

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