javascript - 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 的对话框小部件。查看documentation here .您的代码应如下所示，您无需担心自己关闭弹出窗口/模式。

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

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