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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jaco Grinwis

Jaco Grinwis

19/08/2015 19:21:54
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$( document ).on( "click", ".overlay", function() {
    $( "body" ).removeClass( "overlay" );
});

en
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$( window ).on( "click", ".overlay", function() {
    $( "body" ).removeClass( "overlay" );
});
Gewijzigd op 19/08/2015 20:01:34 door Jaco Grinwis
 
PHP hulp

PHP hulp

11/12/2018 18:11:00
 
Wouter J

Wouter J

19/08/2015 19:44:18
Quote Anchor link
"Beste fietsenmaker, hier is mijn fiets. Hij werkt niet. Ik ga er vanuit dat het morgen is opgelost. Fijne dag verder en tot morgen!

Denk je dat de fietsenmaker nu enig idee heeft wat ie moet doen? Ik denk het niet...

Verander nu die fietsenmaker eens in ons en de fiets in jouw code. Je titel "Waarom werkt dit niet" zegt niet echt veel en vervolgens toon je alleen code. Wat wil je bereiken? Wat gebeurd in de plaats van dat? Wat heb je gedaan om het op te lossen? Waar denk jij dat het aan ligt?
 
- Ariën -
Beheerder

- Ariën -

19/08/2015 19:45:22
Quote Anchor link
- Aar -:
Zou je wat meer duidelijk kunnen geven of je probleem, en daarbij je titel aan willen passen naar je vraag of probleem stelling ?
Wat gebeurt er, wat verwacht je?
 
Jaco Grinwis

Jaco Grinwis

19/08/2015 19:50:11
Quote Anchor link
Heb de titel aangepast zat zo lang op mijn scriptje te ergere dat ik vergat een goede title met beschrijving te geven. Had het geen wat ik wilde al op zoveel manieren gedaan het wilde niet lukken vandaar op de duur beetje in de stres. Dit sitje code is natuurlijk maar een deeltje van het grote geheel.
 
Eddy E

Eddy E

19/08/2015 20:00:41
Quote Anchor link
Voeg eens een ready() toe aan je body.
Tenslotte, wanneer de functie in je browser wordt geladen, bestaat body.overlay nog niet.

Wat een mogelijk oplossing is: bij een onclick('body') kijken of hij de class overlay heeft. Zo ja: verwijderen. Zo nee: toevoegen.
 
Jaco Grinwis

Jaco Grinwis

19/08/2015 20:05:00
Quote Anchor link
Eddy E op 19/08/2015 20:00:41:
Voeg eens een ready() toe aan je body.
Tenslotte, wanneer de functie in je browser wordt geladen, bestaat body.overlay nog niet.

Wat een mogelijk oplossing is: bij een onclick('body') kijken of hij de class overlay heeft. Zo ja: verwijderen. Zo nee: toevoegen.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$(function()

is gelijk aan
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$(document).ready()

of is dit niet wat je bedoelt?
 
DavY -

DavY -

19/08/2015 20:08:13
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
    <script>
    $( function() {
      $( "button" ).on( "click", function(e) {
          e.stopPropagation();
        $("body").addClass( "overlay" ).html('Hoppa, class toegevoegd!');
      });
      $( "body, html" ).on( "click", function() {
        $("body").removeClass( "overlay" ).html('En weg is mijn class!');
      });
    });
    </script>


Edit: Dit is maar eenmalig, dus als je dit herhaaldelijk wilt doen, moet je dus inderdaad dat degene doen wat Eddy al voorstelt.
Gewijzigd op 19/08/2015 20:14:08 door DavY -
 
Jaco Grinwis

Jaco Grinwis

19/08/2015 20:15:05
Quote Anchor link
DavY Blaat op 19/08/2015 20:08:13:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
    <script>
    $( function() {
      $( "button" ).on( "click", function(e) {
          e.stopPropagation();
        $("body").addClass( "overlay" ).html('Hoppa, class toegevoegd!');
      });
      $( "body, html" ).on( "click", function() {
        $("body").removeClass( "overlay" ).html('En weg is mijn class!');
      });
    });
    </script>


Ja mooi dit werk alleen kun je me uitleggen waarom dit met
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$( "body, html" ).on(...
wel werkt en
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$( "body" ).on(...
niet? Ik wil het begrijpen.

Toevoeging op 19/08/2015 20:19:53:

Ik zie dat
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$( "body" ).on(...
maar
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$( "html" ).on(...
wel. Vaag waarom is er op de body niet te klikken?
 
DavY -

DavY -

19/08/2015 20:31:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12

   <script>
    $( function() {
      $( "button" ).on( "click", function() {
          if($("body.overlay").length) {
            $("body").removeClass( "overlay" );
          } else {
            $("body").addClass( "overlay" );
          }
      });
    });
    </script>


Zo kun je blijven klikken op je button. Waarom dat niet werkt, kun je zelf ook wel googlen he. leer je immers meer van.
 
Thomas van den Heuvel

Thomas van den Heuvel

19/08/2015 20:44:07
Quote Anchor link
Twee punten:

- waarom zou je de overlay class aan je body hangen - zou het niet veel praktischer zijn als je een divje aan je DOM toevoegt waar je voorgenoemde class aanhangt, of je zorgt dat deze div al in je pagina zit met display: none;

- hoe zie je overlay class er uit, en wat voor andere typen elementen bevinden zich normaal op je pagina's (waar je deze overlay overheen zet als dat de bedoeling is want dat wordt niet eens duidelijk uit je verhaal), lijkt mij niet heel onbelangrijk voor de beantwoording van je vraag
 
Jaco Grinwis

Jaco Grinwis

19/08/2015 21:01:36
Quote Anchor link
Ik heb nu nog alle in aparte div's maar wil dit anders omdat dit voor een plugin word voor een verschillende menus. Ik zet de overlay niet gelijk in de body maar body.overlay:after en ik wil het in de body tag omdat ik daar nog meer classen in zet voor deze plugin en ze zo overzichtelijk houd daar.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
body.overlay:after {
content: "";
display: block;
overflow: hidden;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
}


Toevoeging op 19/08/2015 21:03:43:

Bedankt allemaal voor de tips en opmerkingen.
 
Eddy E

Eddy E

19/08/2015 21:07:02
Quote Anchor link
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

Thomas van den Heuvel

19/08/2015 21:38:29
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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

Pieter R

19/08/2015 22:06:45
Quote Anchor link
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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
Gewijzigd op 19/08/2015 22:10:59 door Pieter R
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.