2010-11-11 4 views
0

Я новичок в JQuery и Fancybox, поэтому, пожалуйста, будьте конкретны с ответами. Я пытаюсь загрузить контент в абсолютном позиционированном 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. Может быть коротким.

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

+0

У вас есть пример того, что вы пробовали до сих пор? – Kyle

+0

Я ничего не пробовал. Как только я понял немного больше о том, как работает fancybox, я начал искать решение. Основываясь на том, что я узнал до сих пор и скомпилирую файл jaysbox .js, это всего лишь 1 причудливый бокс, и вы можете изменить его attibutes, когда он будет показан. Мне нужны две причудливые коробки. – Maria

+0

извините за опечатки. Я имею в виду «сглаживание fancybox.js-файл, создается только 1 fancybox. «Вы можете изменить его атрибуты, когда он будет показан. Мне нужно два причудливых блока или понять ответ, указанный в ссылке, указанной выше. – Maria

ответ

1

Учитывая, что вы используете «содержание» (который я буду считать это 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 к соответствующим местам (классам, divs, привязным тегам) на своем сайте, где вы действительно хотите, чтобы эти модальные окна отображались, когда пользователь нажимает на страницу.

<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 и связывает примеры для закрепления меток (потому что я нахожу большую часть времени люди хотят гиперссылка, чтобы открыть новые модальные окна) Помните, что вы можете использовать другие вещи, как дивы, проверьте пример: http://colorpowered.com/colorbox/core/example3/index.html

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

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

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

+0

Спасибо StayPuftman. Я попробую и дам вам знать как получается. – Maria

2

FancyBox имеет defaults вариант

defaults: {wrapCSS: 'fancybox-default'} 

Добавить опцию wrapCSS вашего FancyBox вызова. См. Fancybox documentation