title: Make Fancy Box Transparent
body: <p>I am calling a form in <a href="http://fancybox.net/" rel="nofollow">FancyBox</a> 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.</p>
  
  <p>This is a <a href="http://jsfiddle.net/devdarin/vwfTV/1/" rel="nofollow">fiddle</a> of what i have thus far.</p>
  
  <p><strong>Code</strong></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#open").click(function () {
  
      $.fancybox.open({
          content: '&lt;iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank" allowtransparency="true"&gt;&lt;/iframe&gt;',
          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 = '&lt;!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&gt;&lt;html xmlns=\"http://www.w3.org/1999/xhtml\"&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;style type=\"text/css\"&gt;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;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;ol&gt; &lt;li&gt;&lt;label&gt;Name&lt;/label&gt;&lt;input type="text" id="name"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Phone #&lt;/label&gt;&lt;input type="text" id="phone"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Address Line 1&lt;/label&gt;&lt;input type="text" id="add1"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Address Line 2&lt;/label&gt;&lt;input type="text" id="add2"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Address Line 3&lt;/label&gt;&lt;input type="text" id="add3"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Email Add&lt;/label&gt;&lt;input type="text" id="email"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Age&lt;/label&gt;&lt;input type="text" id="age"/&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Date Of Birth&lt;/label&gt;&lt;input type="text" id="dob"/&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="submit" value="Continue"/&gt;&lt;/li&gt; &lt;/ol&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;';
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {background-image:url('http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg');} 
  
  #myFrame{
    background-color:#ffffff;
    opacity:0.3;
    filter:alpha(opacity=30)
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a id="open" href="javascript:;"&gt;Open me&lt;/a&gt;
  </code></pre>