JQueryポップアップボックス - エラー

Question

JQueryポップアップボックスを実装しましたが動作しません。私はまだかなり新しい言語です！私は下に私のコードをポップします！

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

    }); 
}); 

---

<!-- 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 --> 

---

---

は、私はそれが負荷に表示されるが、閉じるボタンをクリックしたときに非表示にする必要があります。

私はすべてを提供していることを願っています...任意の入力をありがとう！

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のためにあなたは

https://jsfiddle.net/6a3o86q7/

デモはこちらをご覧ください .hide()

機能.slideUp()の代わりに.slideRightを使用することができます