Fancybox and css

jquery css fancybox

13,233

Try this:

$(document).ready(function() {
    $("#popup").fancybox({
        'padding' : 30,
        'width' : 600,
    }).trigger('click');
});

Here are some more examples: http://fancybox.net/blog

Edit: The above solution is working if you have iframe loaded in fancybox. In your case you need to set width and padding for #melding:

#melding{ 
   text-decoration:none;
   width: 600px;
   padding: 30px 30px 20px 30px;

}

13,233

Author by

user1768537

Updated on June 04, 2022

Comments

user1768537 almost 2 years

I have a Fancybox that opens on pageload. Everything is working fine, exept I'm not able to style the pop-up box. It seem like it will not pick up my css. By the way; I'm not familiar with js - I just copy from tutorials! So if the answer includes js, please be very spesific. Thank you!

In head:

    <link rel="stylesheet" type="text/css" href="/js/jquery.fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" href="/stylesheets/ups-screen.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>


<body onload="$(a'#popup').trigger('click');">

Right before closing body-tag:

    <script type="text/javascript">
$(document).ready(function() {
    $("#popup").fancybox().trigger('click');

});

The content to load:

<a id="popup" href="#melding"></a>
<div style="display: none;">
<div class="fancybox">
<div id="melding"><br />
<br />
<h3>Velkommen til min nye hjemmeside.</h3>
<br />
<p>Testing - Testing. </p>
</div>
</div>
</div>

The css in the ups-screen stylesheet:

.fancybox {
width: 600px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-top: 30px;
 }

#melding{ 
text-decoration:none;
}
#popup{
background-color:#444;
}

No matter what I try or do, it returns the same sized square without any padding.

user1768537 over 11 years

Sorry, no - it's still not changing size. But it kind of added the padding. Only not to the text, but the inner div that's included in the fancybox.css
user1768537 over 11 years

I've also tried to påt the width and padding for #melding. Still not working. But I'll try to change the version of Fancybox. I actually downloaded 2.1.2, so I don't know wy I ended up with 1.2.1. I guess I was blind for a moment...
user1768537 over 11 years

Now I've updated to Fancybox 2.1.2 and done the changes you set up for me, and it works!!! Thank you so very much!