JQuery Pop Up Box - Fehler

Question

Ich habe eine JQuery Pop Up Box implementiert, die nicht funktionieren wird, ich hatte gehofft, du könntest mich leiten. Ich bin noch ziemlich neu in der Sprache! Ich werde meinen Code unten setzen!

---

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

$(document).ready(
function() { 

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

    }); 
}); 

---

Ich brauche es auf Last angezeigt werden aber ausgeblendet, wenn die Schließen-Schaltfläche geklickt wird.

Ich hoffe, ich habe alles zur Verfügung gestellt ... Danke für jede Eingabe!

Ta, Jason.

Answer 1

Sie können das Dialog-Widget von JQuery UI verwenden. Schauen Sie sich die documentation here. Ihr Code sollte wie folgt aussehen und Sie müssen sich nicht darum kümmern, das Popup/Modal selbst zu schließen.

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

Sie können mehr mit JQuery UI spielen, um Ihrem Code Animationen und andere Dinge hinzuzufügen.

Answer 2

für einfache jQuery können Sie .hide() von .slideUp() Funktion anstelle von .slideRight verwenden

Demo Sehen Sie hier

https://jsfiddle.net/6a3o86q7/