Два разных стиля FancyBox

Question

Я новичок в JQuery и Fancybox, поэтому, пожалуйста, будьте конкретны с ответами.Я пытаюсь загрузить контент в абсолютно позиционированном FancyBox с прозрачным фоном.Это поле никогда не должно закрываться.

У меня также есть ссылки на странице для открытия FancyBox с содержимым .PDF.

Оба работают независимо.Мне нужно, чтобы они работали вместе.

Мне нужно знать, как контролировать стиль каждого из них.Единственная ссылка, которую я мог найти, была внизу этой страницы: http://www.givegoodweb.com/post/125/sizing-and-positioning-fancybox,, но этот ответ недостаточно конкретен для моих текущих знаний.

Из того, что я знаю до сих пор #page-1 #fancybox {etc...} находится вCSS и относится к тегу, который имеет ID ="page-1".

Мне нужен образец кода HTML, CSS и кода FancyBox.Может быть коротким.

Спасибо всем заранее за вашу помощь.

Answer 1

Fancybox имеет опцию defaults

defaults: {wrapCSS: 'fancybox-default'}

Добавьте опцию wrapCSS к вызову fancybox. См. Документацию Fancybox

Answer 2

Учитывая, что вы используете «контент» (я предполагаю, что это HTML), а не изображения, я думаю, вам лучше будет использовать очень похожий скрипт под названием colorbox: http://colorpowered.com/colorbox/

Это очень легкореализовать.

1) Назовите скрипты jquery и colorbox в голове:

<script src="/backend/js/jquery-1.4.2.min.js"></script> 
<script src="/backend/js/jquery.colorbox-min.js"></script> 

2) Теперь вы делаете крошечный кусочек JS в голове.Вы привязываете скрипт colorbox к соответствующим местам (классы, div, теги привязки) на вашем сайте, где вы действительно хотите, чтобы эти модальные окна появлялись, когда пользователь щелкает страницу.

<script language="javascript" type="text/javascript">  
    $(document).ready(function(){
        $("a[rel='example1']").colorbox();
        $("a[rel='example2']").colorbox();
        $("a[rel='example3']").colorbox();              
        $("a[rel='example4']").colorbox();
        $("a[rel='example5']").colorbox();
    });
</script>  

Это использует синтаксис jquery и привязывает примеры к якорным тегам (потому что я нахожу, что большинство людей хотят, чтобы гиперссылки открывали новые модальные окна) Помните, что вы можете использовать другие вещи, такие как div, посмотрите пример:http://colorpowered.com/colorbox/core/example3/index.html

3) Теперь все, что вам нужно сделать, это поместить атрибут rel в тег привязки на вашей странице и связать его с внешним HTML-файлом, который вы хотите открыть, в качестве модального окна:

<a rel='example1' href="/portfolio/examples/testpage.html" title="Your text here">Click this link to open a modal window</a> 

Что касается CSS, относитесь к модальным элементам окна так же, как к любому обычному элементу страницы.Все стили в вашей таблице стилей вернутся в модальное пространство.Надеюсь это поможет.Проверьте мой сайт, если вам нужен более реальный пример этого в действии: http://jollygreendesigns.com/portfolio/