JQuery弹出框-错误

Question

我已经实现了一个JQuery弹出盒将不能工作，我希望你可以指导我。我对这门语言还是相当陌生的！我会在下面弹出我的代码！

<!-- POP UP HTML -->
<div class="infocontainer">
<div class="infoouter">
<!-- BACKGROUND COLOUR -->
</div><!-- /infoouter -->
<div class="infobox">

<a href="#" class="infoclose"><img class="infoclose" alt="close" src="http://www.doopsdesigns.co.uk/images/socialicons/close.png" width="26" height="26">
</a>
<img class="infoimg" src="#">

<div class="infotext">
<h1 align="center">HELP JASONS POP UP BOX</h1>
</div><!-- /infotext -->

</div><!-- /info box -->
</div><!-- /infocontainer -->
<!-- /POP UP -->

/* POPUPSTART CSS */
.infocontainer{
    display:block;
    }

.infoouter{
    background-color:#222222;
    height:100%;
    width:100%;
    position:absolute;
    z-index:9998;
    float:none;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }


.infobox{
    background-color:#ffffff;
    border-style: solid;
    border-width: 5px;
    border-color: #f3af4e;
    height:60%;
    width:80%;
    position:absolute;
    left:10%;
    top:20%;
    padding:15px;
    z-index:9999;
    float:none;
    }

.infoimg{
    float:left;
    }

.infoclose{
    float:right;
    }   

.infotext{
    left:10%;
    right:10%;
    top:20%;
    bottom:20%;
    padding:10%;
    height:60%;
    width:80%;
    text-align:center;
    position:absolute;
    }
/* /POPUPSTART */

// JavaScript文件

$(document).ready(
function() {

    $(".infoclose").click(function() {
        $(".infocontainer").slideRight("slow");

    });
});

我需要它显示在加载，但隐藏时，关闭按钮被点击。

我希望我提供了一切..。谢谢您的意见！

塔杰森。

Answer 1

您可以使用JQuery UI的对话框小部件。看看这里的文件。您的代码应该如下所示，您不需要担心自己关闭弹出/模式。

$("div.infocontainer").dialog({
    //Add more properties, like modal, closeOnEscape, etc -- refer Documentation
})

您可以更多地使用JQuery UI来向代码中添加动画和其他内容。

Answer 2

对于简单的jQuery，您可以使用.hide() of .slideUp()函数而不是.slideRight

参见这里的演示

https://jsfiddle.net/6a3o86q7/