Question

当我点击某个链接时，我正在打开一个弹出窗口，但是我遇到了问题。

这是我的JavaScript代码：

$(function() {
    $('.overlay-trigger').click(function(){
        $('#expose-mask').fadeIn('fast',function()
        {
            $('.overlay-box').css({'display':'block'});
        });
    });
    $('#boxclose').click(function()
    {
        $('.overlay-box').animate({'top':'-200px'},500,function()
        {
            $('#expose-mask').fadeOut('fast');
        });
    });
});

我的HTML代码：

<div class="overlay-box">
 <a class="boxclose" id="boxclose"></a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>

<a id="help" class="overlay-trigger" href="#">Help</a>

<div id="expose-mask" style="display: none;"></div>

和我的CSS：

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

.overlay-box
{
    background-color: #FFFFFF;
    display: none;
    position: fixed;
    top: 40%;
    right: 0;
    left: 0;
    width: 50%;
    margin: 0 auto;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}

a.overlay-boxclose{
    float:right;
    width:26px;
    height:26px;
    background:transparent url(images/cancel.png) repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
}

.overlay-box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

目前，如果点击我的链接，它会打开激活器overlay-trigger

我想删除JavaScript代码的这些部分：http://prntscr.com/680zzd

我想在弹出窗口打开时，如果我点击我的身份#expose-mask，它会关闭弹出窗口。

您可以在此处进行实时预览：nextgenfocus.com/test/（单击页面底部的＆＃34;帮助＆＃34;文本以打开弹出窗口）。

谢谢，如果你能帮助我。

Answer 1

问题出在那里。当你点击关闭按钮时，你正在更改位置顶部：-200px的叠加框，但是再次显示弹出窗口时你需要给出顶部：40％位置（重置）在css中相同。并且您缺少关闭按钮文本/图像

<div class="overlay-box">
 <a class="boxclose" id="boxclose">close</a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>

<a id="help" class="overlay-trigger" href="#">Help</a>

<div id="expose-mask" style="display: none;"></div>

js code：

$(function() {
    $('.overlay-trigger').click(function(){
        $('#expose-mask').fadeIn('fast',function()
        {
            $('.overlay-box').css({'display':'block','top':'40%'});
        });
    });
    $('#boxclose').click(function()
    {
        $('.overlay-box').animate({'top':'-200px'},100,function()
        {
            $('#expose-mask').fadeOut('fast');
        });
    });
});

请参阅demo

JavaScript：删除部分代码并在单击时删除元素

1 个答案: