Question

我在FancyBox中调用一个表单我想在用户点击它时使其透明。我想让它足够透明以查看背景图片。我已经设法在iframe透明中获取表单但是我不确定如何让fancybox本身透明。

这是我迄今为止的fiddle。

代码

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>

Answer 1

你想在CSS中使用这样的东西：

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

这会改变它，所以你可以看透它。

最后0.5是你想要改变它的不透明程度。它越高，它就越不透明。

Answer 2

您好，您可以试试这个：

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

查看演示 http://jsfiddle.net/vwfTV/3/

Answer 3

我使用此代码找到了解决方案

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

我在这里找到了它：official website

使花式盒透明

3 个答案: