CODEWITHSUNDEEP
javascriptjquerycssfancyboxfancybox-2
devdar
devdar

Reputation: 5654

Make Fancy Box Transparent

I am calling a form in FancyBox i would like to make it transparent when the user clicks on it. I would like to make it transparent enough to see the background picture. I have managed to get the form in the iframe transparent however i am not sure how to get the fancybox itself transparent.

This is a fiddle of what i have thus far.

Code

JS

$("#open").click(function () {

    $.fancybox.open({
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank" allowtransparency="true"></iframe>',
        autoSize: false,
        width: '80%',
        height: '80%',
        scrolling: 'no',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(myContent);
            iframeDoc.close();

        }
    });
});

var myContent = '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title><style type=\"text/css\">html{height:100%;}body{height:100%;margin:0px;font-family: Helvetica,Arial;}label{float left;display:block;font-size:13px;padding:5px;clear:both;}input[type=text], input[type=password],select{flot: righ;width:250px;border: 1px solid #3F0B1B;}input[type=text]:focus, input[type=password]:focus, select{background: #DDD;}ol {list-style-type: none;margin:0px;padding-left:15px;}ol ul{margin: 0px; padding: 0px; text-indent: -1em; margin-left: 1em;}.div{border: 1px solid black;}.fancybox{ overflow: hidden !important;}</style></head><body><div><ol> <li><label>Name</label><input type="text" id="name"/></li> <li><label>Phone #</label><input type="text" id="phone"/></li> <li><label>Address Line 1</label><input type="text" id="add1"/></li> <li><label>Address Line 2</label><input type="text" id="add2"/></li> <li><label>Address Line 3</label><input type="text" id="add3"/></li> <li><label>Email Add</label><input type="text" id="email"/></li> <li><label>Age</label><input type="text" id="age"/></li> <li><label>Date Of Birth</label><input type="text" id="dob"/></li> <li><input type="submit" value="Continue"/></li> </ol></div></body></html>';

CSS

body {background-image:url('http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg');} 

#myFrame{
  background-color:#ffffff;
  opacity:0.3;
  filter:alpha(opacity=30)
}

HTML

<a id="open" href="javascript:;">Open me</a>

Upvotes: 1

Views: 7284

Answers (3)

Rahul G Yadav
Rahul G Yadav

Reputation: 21

I found a solution by using this code

$.fancybox({
   helpers:{
     overlay : null
     }
});

I found it here: official website

Upvotes: 1

Albzi
Albzi

Reputation: 15609

You want something like this in your CSS:

.fancybox-skin{
    background:rgba(255,255,255,0.5);
}

That will change it so you can see through it.

The last 0.5 is what you want to change in terms of how opaque it is. The higher it is, the more opaque it is.

Upvotes: 6

DaniP
DaniP

Reputation: 38252

Hi you can try with this:

.fancybox-skin {
  background-color:rgba(255,255,255,0.3);
}

Check the demo http://jsfiddle.net/vwfTV/3/

Upvotes: 2

Related Questions