Kan class wel toevoegen maar daarna met body click niet verwijderen. Waarom gaat dit niet?

Door Jaco Grinwis op 19-08-2015 19:21 gewijzigd op 19-08-2015 20:01

3.756 views


<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <button class="btn btn-default">click</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $( function() {
      // Click op button om de overlay te laten zien
      $( "button" ).on( "click", function() {
        $( "body" ).addClass( "overlay" );
      });
        // Click op de body om de overlay te laten verdwijnen
      $( "body.overlay" ).on( "click", function() {
        $( "body" ).removeClass( "overlay" );
      });
    });
    </script>
  </body>
</html>

Als ik op de button klik dan voegd hij gewoon de overlay class toe aan de body tag.
Maar als ik dan klik in de body zou hij de overlay class moeten verwijderen alleen dat doet hij niet en geeft ook geen error via de console. Ik weet niet waarom dit niet lukt.
ik heb ook geprobeerd met


$( document ).on( "click", ".overlay", function() {
    $( "body" ).removeClass( "overlay" );
});


$( window ).on( "click", ".overlay", function() {
    $( "body" ).removeClass( "overlay" );
});

Eddy E

19-08-2015 21:07

Je kan toch ook het element weg laten?

Dus .overlay.
Of dat nu op de <body> of op een <button> of zelfs een <pre> is: dat maakt dan niet uit.

Thomas van den Heuvel

19-08-2015 21:38

Let me get this straight: je zet iets met een click over je body heen (of voegt iets aan je body toe, wat niet echt van je body deel uitmaakt?). En vervolgens wil je op je body clicken om dat iets weer te laten verdwijnen :).

Ik zou zoiets doen:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.overlay {
    display: none; /* standaard verborgen dus */
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
}
</style>
</head>
<body>
<button class="btn btn-default">click</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$().ready(function() {
    // kan door je plugin geregeld worden - zelfs met random id enzo
    $('body').append('<div id="overlay" class="overlay" />');

    // overlay div tonen
    $('button').on('click', function() {
        $('#overlay').css('display', 'block');
    });

    // overlay div verbergen
    $('#overlay').on('click', function() {
        $(this).css('display', 'none');
    });
});
</script>
</body>
</html>

Pieter R

19-08-2015 22:06 gewijzigd op 19-08-2015 22:10

Thomas was me net voor...
Heb ik ook mee zitten klooien en kwam hier op uit.
Komt eigenlijk op hetzelfde neer.
Zit wel nog een dialog box in verwerkt.


.overlay {
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: 222;
    opacity: 0.2;
    background:#ababab;
    display:none;
}
.dialog {
    position: absolute;
    margin-left: 200px;
    margin-top: 100px;
    z-index: 333;
    display:none;
    background:#ffffff;
}

$(".button").click(function () {
    $('.overlay, .dialog').show();
});

$(".overlay, .dialog").click(function () {
    $('.overlay, .dialog').hide();
});

<div class="button">CLICK</div>
<div class="dialog">DIALOG</div>
<div class="overlay"></div>

Aldus: https://jsfiddle.net/hab4vhv2/

Grt Pieter

Reageren

Inloggen om te reageren