PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Achtergrond verwijderen onclick!

Door Mathieu Posthumus op 03-03-2014 09:50
744 views
Goedemorge iedereen,

Ik ben bezig met een inlog slide box, maar dat is dus een block van 50% width en 250px height.
Dus met de achtergrond heb ik er een overlay op gezet en dat opcaty gegeven.
Maar nu wil ik dus als ik op de overlay klik dat het hele login box en overlay weg gaat.

Wat ik tot nu toe zelf heb geprobeerd is dit.


$("overlay").click(function(){
     $("body").removeClass('overlay');
});


Ik zie zelf de fout niet heb het ook opgezocht maar kan het maar niet fixen.
Hopelijk kunnen jullie me helpen.

Dankjewel.
Mich
03-03-2014 09:53
$("overlay") moet $("#overlay")(id) of $(".overlay") (class) zijn.
Mathieu Posthumus
03-03-2014 09:55
Allebei of 1 van de 2? want ik zag het op w3schools ook zonder
Mich
03-03-2014 09:56 
<div class="overlay"></div>
<script>
$(".overlay").click(function(){
     $("body").removeClass('overlay');
});
</script>

of

<div id="overlay"></div>
<script>
$("#overlay").click(function(){
     $("body").removeClass('overlay');
});
</script>
Mathieu Posthumus
03-03-2014 09:58
Oke ik heb dus nu zo, maar hij doet het nu niet wat is er fout?


$("#overlay").click(function(){
    $("body").removeClass('overlay,login_box');
});


En misschien handig om te weten?
Het staat in een aparte .js bestand.

Toevoeging op 03/03/2014 10:00:24:

en dit staat er in mijn php bestand.


<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="slide_login.js"></script>
<div id="lightbox_overlay" class="" style="display: none; opacity: 0;"></div>
<div id="overlay"></div>
<div class="login_box"></div>
Mich
03-03-2014 10:02 gewijzigd op 03-03-2014 10:04
Het voorbeeld dat ik in je vorige topic gaf sloot ook de div als je daarbuiten klikte, was dat niet voldoende?

edit: deze dus


/**
* Click outside container closes div and removes style from overlay
*/
$(document).mouseup(function (e){
if (!$('.login_box').is(e.target) &&
    $('.login_box').has(e.target).length === 0)  {
        $('.login_box').slideUp("slow");
        $("#overlay").removeAttr( 'style' );
    }
});
Mathieu Posthumus
03-03-2014 10:06
Hij werkt dankje Michael, maar wat daar staat ken ik nog niet allemaal.
Mich
03-03-2014 10:19 gewijzigd op 03-03-2014 10:20
$(document) is je gehele pagina.
mouseup is wanneer je de muisknop los laat.
e is een event. Deze bevat de actie.
Verder kijkt die of de event (muis klik in dit geval) niet plaats vind in de login_box en wordt dan uitgevoerd.
Mathieu Posthumus
03-03-2014 10:22
oke dankje ik begrijp het al gelijk een stuk beter.

Reageren

Inloggen om te reageren