fancybox не загружает контент должным образом - PullRequest
Новая
       21

fancybox не загружает контент должным образом

5 голосов
/ 12 сентября 2011

Итак, я добавляю div к телу, и этот div будет появляться при нажатии на тег a на самом деле. Чтобы добиться эффекта наложения тела, я использую fancybox. Тем не менее, я могу добавить div к телу, но этот div не загружается как fancybox. Может ли кто-нибудь помочь здесь:

Мой код здесь:

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

Кроме того, я что-то упускаю в fancybox, я также не вижу близкого креста в верхнем правом углу fancybox в chrome, и нажатие в любом месте на fancybox просто закрывает fancybox, чего не должно быть.

1 Ответ

1 голос
/ 19 сентября 2011

Вот код, который вы могли бы использовать для создания наложения: 

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