Modal DIV boven op een form werkt OK, alleen wordt een onderliggende button nog getoond die kan gekl
ik heb een MODAL DIV gemaakt die dmv een knop wordt getoond met jQuery.
Er wordt netjes een grijze laag over het onderliggende scherm getoond en daarboven dan het modale venster.
Dit werkt netjes, behalve 1 ding niet. Op de onderliggende form staat een button. Deze button komt nog steeds BOVEN de modal DIV en kan ook nog steeds geklikt worden. Nochthans lijkt het me dat ik de z-order goed heb gezet.
Code om het scherm te openen :
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
40
41
42
43
44
45
46
47
48
49
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
40
41
42
43
44
45
46
47
48
49
$(document).ready(function(){
$('#openscherm').click(function () {
$("#overlay").show();
$("#modal").show("slow");
});
$('#sluiter').click(function () {
var a = $('#mat_naam').val();
var b = $('#mat_naam option:selected').text();
$('#corpusmateriaal').val(a);
$('#corpusmateriaalnaam').val(b);
// $("#materiaal").hide("slow");
$("#modal").hide("slow");
$("#overlay").hide();
});
[b]De overlay zelf :[/b]
<div id='overlay'></div>
<div id='modal'>
<div id='modalcontent'>
<form>
<table>
<tr>
<td width="100px">Materiaal Type : </td>
<td>
<select name="mat_type" id="mat_type">
<option value="0">--Kies Materiaal Type--</option>
<?php
createoptions("materiaaltypes", "materiaaltypeid", "materiaaltypenaam", $db);
?>
</select>
</td>
</tr>
<tr>
<td>Materiaal naam</td>
<td>
<select id="mat_naam" name="mat_naam">
</select>
</td>
</tr>
</table>
</form>
<button id="sluiter">Materiaal gekozen...</button>
<button id="cancel_button">Annuleren</button>
</div>
</div>
$('#openscherm').click(function () {
$("#overlay").show();
$("#modal").show("slow");
});
$('#sluiter').click(function () {
var a = $('#mat_naam').val();
var b = $('#mat_naam option:selected').text();
$('#corpusmateriaal').val(a);
$('#corpusmateriaalnaam').val(b);
// $("#materiaal").hide("slow");
$("#modal").hide("slow");
$("#overlay").hide();
});
[b]De overlay zelf :[/b]
<div id='overlay'></div>
<div id='modal'>
<div id='modalcontent'>
<form>
<table>
<tr>
<td width="100px">Materiaal Type : </td>
<td>
<select name="mat_type" id="mat_type">
<option value="0">--Kies Materiaal Type--</option>
<?php
createoptions("materiaaltypes", "materiaaltypeid", "materiaaltypenaam", $db);
?>
</select>
</td>
</tr>
<tr>
<td>Materiaal naam</td>
<td>
<select id="mat_naam" name="mat_naam">
</select>
</td>
</tr>
</table>
</form>
<button id="sluiter">Materiaal gekozen...</button>
<button id="cancel_button">Annuleren</button>
</div>
</div>
De knop die op de normale form onderaan nog steeds naar boven jumpt.
Code (php)
1
2
2
<div id="hiddenonstart">
<center><button type="submit">Toon berekening van deze kast</button></center>
<center><button type="submit">Toon berekening van deze kast</button></center>
En de CSS :
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
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
/* MODAL */
/*************************************************/
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
z-order: 100;
}
#modal {
display: none;
z-order: 150;
position:fixed;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
left: 300px;
top: 50px;
}
#modalcontent {
border-radius:8px;
background:#fff;
padding:20px;
height: 120px;
width: 300px;
z-order: 200;
}
/*************************************************/
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
z-order: 100;
}
#modal {
display: none;
z-order: 150;
position:fixed;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
left: 300px;
top: 50px;
}
#modalcontent {
border-radius:8px;
background:#fff;
padding:20px;
height: 120px;
width: 300px;
z-order: 200;
}
Iemand een idee ?
groetjes,
Davy
Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 11/09/2013 18:12:33 door Bas IJzelendoorn
moet dat geen z-index zijn?
Hoe DOM kan een mens zijn...
Snelle typgewoonte of gewoon domme fout...
Opgelost en het werkt.
Frank ==> 3de pint verdiend...
Groetjes,
Davy