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");

    });
});

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

我希望我已经提供了所有内容......感谢任何意见！

Ta，Jason。

Answer 1

您可以使用JQuery UI的对话框小部件。查看documentation here。您的代码应如下所示，您无需担心自己关闭弹出/模态。

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

您可以使用JQuery UI进行更多操作，以便为代码添加动画和其他内容。

Answer 2

对于简单的jQuery，您可以使用.hide() .slideUp()函数代替.slideRight

见这里的演示

https://jsfiddle.net/6a3o86q7/

JQuery弹出框 - 错误

2 个答案: