Question

我遇到一些非常简单的Lightbox行为问题。我需要修改这个脚本，以允许用户点击叠加层来关闭表格，并且只有坐在div中并且不覆盖整个屏幕时才会遇到问题。

我也希望它在点击时淡入。我已经看过网了但对我没有任何意义 - 我是JS和Jquery的新手，所以任何指针都会很棒。

CSS：

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:888888;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
float:left;
}
.white_content {
display: none;
position: absolute;
top: 0%;
left: 25%;
width: 50%;
height: 100%;
padding: 16px;
border: none;
background-color: white;
z-index:999999;
overflow: auto;
float:left;
}
.textright{float: right;}

JS：

 $(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});

HTML：

 <a href ="javascript:void(0)" class="showpop"> <input type="submit" class="button" value="Arrange to see a demo" /></a>

<div id="light" class="white_content">

<a href ="javascript:void(0)" class="hidepop textright" style="text-decoration:none;">X</a>

<br />
<br />

            <form method="post" action="#">
                                <div class="row half">
                                    <div class="6u"><input type="text" name="name" placeholder="Name" /></div>
                                    <div class="6u"><input type="text" name="email" placeholder="Email" /></div>
                                </div>
                                <div class="row half">
                                    <div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
                                </div>
                                <div class="row">
                                    <div class="12u">
                                        <ul class="actions">
                                            <li><input type="submit" class="button" value="Send Message" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>


</div>
<div id="fade" class="black_overlay"></div>

Answer 1

稍微扩展其余的答案以这种方式使用fadeIn()和fadeOut()可以实现“关闭”按钮所需的效果。并点击叠加

检查FIDDLE

$(".showpop").click(function(){
   $("#light").fadeIn();
   $("#fade").fadeIn();
});
$(".hidepop").click(function(){
   $("#light").fadeOut();
   $("#fade").fadeOut();
});

$(".black_overlay").click(function() { $(this).fadeOut(); $("#light").fadeOut(); });

Answer 2

使用fadeOut和fadeIn。请参阅随附的jsfiddle：

http://jsfiddle.net/R8ULU/

$(".showpop").click(function(){
    $("#light").fadeIn();
    $("#fade").fadeIn();
});
$(".hidepop").click(function(){
    $("#light").fadeOut();
    $("#fade").fadeOut();
});

Answer 3

添加此

$（＆＃34; .black_overlay＆＃34;）。click（function（）{$（this）.hide（）; $（＆＃34;＃light＆＃34;）。hide（）;}） ;

这样您就可以点击叠加层关闭。

Answer 4

在末尾添加这些行

$('#fade').click(function(){
    $(this).hide();
    $("#light").hide();
});

更新fiddle

灯箱关闭点击/淡入行为

4 个答案: