Colorbox внутри встроенного HTML с использованием странного поведения jquery .load () - PullRequest
Новая
       16

Colorbox внутри встроенного HTML с использованием странного поведения jquery .load ()

0 голосов
/ 10 декабря 2010

Я столкнулся с интересным событием, пытаясь использовать плагин colorbox jquery.

Сначала, чтобы убедиться, что я правильно использовал плагин, я создал тестовую страницу, которая загрузила div и он работал.*

Затем я перенес этот код на свой веб-сайт и обнаружил странное отображение.

Сначала мне нужно объяснить, как я загружаю HTML:

У меня есть главный index.htmстраница с навигационными кнопками.Каждый выполняет jquery .load (), который загружает другую html-страницу в div содержимого.HTML, который загружается в div содержимого, имеет код colorbox и div, который загружается в colorbox. 

Sample .load() used in nav button in index.htm:

//loads home.htm into contentdiv inside index.htm
$(document).ready(function () {
    $("#btHome").click(function (event) {
        $('#contentregion').load('home.htm');
    });

    return false;
});

Когда я вызываю функцию color box из этой встроенной html-страницы (home.htm), япросто ничего не вижуЯ знаю, что поле цвета загружено, потому что я не могу нажимать какие-либо кнопки или ссылки нигде на всей странице. 

//function to load colorbox inline
$(document).ready(function () {
    $(".HomeAccreditations").colorbox({ transition: "fade", speed: 500, overlayClose:         false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"});
});

Далее я попробовал следующее.Я загрузил страницу index.html, как описано выше, а затем перешел на другой встраиваемый html с помощью кнопок навигации.

Затем я вернулся к index.html с помощью кнопок навигации.К моему удивлению, теперь отображается модальное окно colorbox, однако я не могу щелкнуть где-либо на блоке, так как он просто отображается как модальная форма только для отображения.

1 Ответ

1 голос
/ 02 мая 2011

Вы можете добиться успеха используя это: 

$.colorbox({ transition: "fade", speed: 500, overlayClose: false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"});
...