灯箱点击关闭/淡入行为

debugcn 发表于 Dev

用户名

我在使用非常简单的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>

阿比

只需稍微扩展其余答案，即可使用fadeIn()并以fadeOut()这种方式实现您想要的“关闭按钮”和单击覆盖图效果

检查场

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。