我正在调用 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>
最佳答案
你想要在你的 CSS 中有这样的东西:
.fancybox-skin{
background:rgba(255,255,255,0.5);
}
这会改变它，所以你可以看穿它。
最后一个 0.5 是您想要更改的不透明程度。越高，越不透明。
关于javascript - 使花式框透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19636968/