Two different FancyBox styles

I am new to JQuery and Fancybox so please be specific with answers. I am trying to load content in a absolute positioned FancyBox with a transparent background. This box should never close.

I also have links on the page to open a FancyBox with .PDF content.

Both work independently. I need them to work together.

I need to know how to control the style of each. T开发者_StackOverflow中文版he only reference I could find was at the bottom of this page: http://www.givegoodweb.com/post/125/sizing-and-positioning-fancybox, but this answer is not specific enough for my current knowledge.

From what I know so far #page-1 #fancybox {etc...} is in the CSS and relates to a tag that has an ID ="page-1".

I need a sample of the HTML code, the CSS, and the FancyBox code. Can be short.

Thank you all in advance for your assistance.

Fancybox has a defaults option

defaults: {wrapCSS: 'fancybox-default'}

Add the wrapCSS option to your fancybox call. See the Fancybox documentation

Considering you are using 'content' (which I will assume is HTML) and not images, I think you would be better served by a very similar script called colorbox: http://colorpowered.com/colorbox/

It is very easy to implement.

1) Call the jquery and colorbox scripts in the head:

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

2) Now you do a teeny, tiny bit of JS in the head. You bind the colorbox script to the appropriate places (classes, divs, anchor tags) on your site where you actually want these modal windows to appear when the user clicks the 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>  

This uses jquery syntax and binds the examples to anchor tags (because I find most of the time people want hyperlinks to open new modal windows) Remember you can use other things like divs, check the example: http://colorpowered.com/colorbox/core/example3/index.html

3) Now all you do is put the 'rel' attribute into an anchor tag on your page and link it to the external HTML file you want opening as a modal window:

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

As far as CSS goes, treat the modal window elements as you would any normal page element. All styles in your stylesheet will recurse into the modal space. Hope this helps. Check my site if you need a more real-world example of this in action: http://jollygreendesigns.com/portfolio/