Deux styles FancyBox différents

Question

Je suis nouveau sur JQuery et Fancybox, alors soyez précis avec des réponses. J'essaye de charger le contenu dans un FancyBox positionné absolu avec un fond transparent. Cette boîte ne devrait jamais fermer.

J'ai aussi des liens sur la page pour ouvrir un FancyBox avec du contenu .PDF.

Les deux fonctionnent indépendamment. J'ai besoin d'eux pour travailler ensemble.

J'ai besoin de savoir comment contrôler le style de chacun. La seule référence que j'ai pu trouver était au bas de cette page: http://www.givegoodweb.com/post/125/sizing-and-positioning-fancybox, mais cette réponse n'est pas assez spécifique pour mes connaissances actuelles. D'après ce que je sais à ce jour #page-1 #fancybox {etc...} est dans le CSS et se rapporte à un tag qui a un ID ="page-1".

J'ai besoin d'un échantillon du code HTML, du code CSS et du code FancyBox. Peut être court.

Merci d'avance pour votre aide.

Answer 1

Considérant que vous utilisez le « contenu » (que je suppose est HTML) et non des images, je pense que vous seriez mieux servis par un script très similaire appelé colorbox: http://colorpowered.com/colorbox/

Il est très facile à mettre en œuvre .

1) Appelez les scripts jquery et colorbox dans la tête:

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

2) Maintenant, vous faites un minuscule, minuscule morceau de JS dans la tête. Vous liez le script Colorbox aux emplacements appropriés (classes, divs, balises d'ancrage) sur votre site où vous souhaitez réellement que ces fenêtres modales apparaissent lorsque l'utilisateur clique sur la page.

<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> 

Il utilise la syntaxe jquery et lie les exemples pour ancrer les balises (parce que je trouve la plupart du temps les gens veulent des liens hypertextes pour ouvrir de nouvelles fenêtres modales) Rappelez-vous que vous pouvez utiliser d'autres choses comme divs, consultez l'exemple: http://colorpowered.com/colorbox/core/example3/index.html

3) maintenant, tout ce que vous faites est de mettre l'attribut « rel » dans une balise d'ancrage sur votre page et un lien dans le fichier HTML externe que vous souhaitez ouvrir une fenêtre modale:

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

en ce qui concerne CSS va, traiter les éléments de la fenêtre modale comme y Vous auriez un élément de page normal. Tous les styles de votre feuille de style seront recurrés dans l'espace modal. J'espère que cela t'aides. Vérifiez mon site si vous avez besoin d'un exemple plus dans le monde réel de ce en action: http://jollygreendesigns.com/portfolio/

Answer 2

Fancybox a une option defaults

defaults: {wrapCSS: 'fancybox-default'} 

Ajoutez l'option wrapCSS à votre appel fancybox. Voir la Fancybox documentation