Kan class wel toevoegen maar daarna met body click niet verwijderen. Waarom gaat dit niet?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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>
<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)
1
2
3
2
3
$( document ).on( "click", ".overlay", function() {
$( "body" ).removeClass( "overlay" );
});
$( "body" ).removeClass( "overlay" );
});
en
Code (php)
1
2
3
2
3
$( window ).on( "click", ".overlay", function() {
$( "body" ).removeClass( "overlay" );
});
$( "body" ).removeClass( "overlay" );
});
Gewijzigd op 19/08/2015 20:01:34 door Jaco Grinwis
"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?
- 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?
Wat gebeurt er, wat verwacht je?
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.
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.
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)
1
$(function()
is gelijk aan
Code (php)
1
$(document).ready()
of is dit niet wat je bedoelt?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
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>
$( 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 -
DavY Blaat op 19/08/2015 20:08:13:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
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>
$( 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)
1
$( "body, html" ).on(...
Code (php)
1
$( "body" ).on(...
Toevoeging op 19/08/2015 20:19:53:
Ik zie dat
Code (php)
1
$( "body" ).on(...
Code (php)
1
$( "html" ).on(...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
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.
- 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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
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;
}
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.
Dus .overlay.
Of dat nu op de <body> of op een <button> of zelfs een <pre> is: dat maakt dan niet uit.
Ik zou zoiets doen:
Code (php)
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
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>
<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>
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)
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
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>
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