使花式盒透明

Question

使花式盒透明

dev*_*dar 1 javascript css jquery fancybox fancybox-2

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

这是我到目前为止的一个小提琴.

码

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>';

Run Code Online (Sandbox Code Playgroud)

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)
}

Run Code Online (Sandbox Code Playgroud)

HTML

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Alb*_*bzi 6

你想在你的CSS中想要这样的东西:

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

Run Code Online (Sandbox Code Playgroud)

这会改变它,所以你可以看透它.

最后一个0.5是你想要改变它的不透明度.它越高,它就越不透明.

`最后0.5是你想要改变它的不透明程度.它越高,它就越不透明了......实际上,反之亦然. (2认同)

归档时间：	12 年前
查看次数：	6866 次
最近记录：	10 年，7 月前