Popup venster met bootstrap modal
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
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
<?php if ($errors == 0)
{
echo '<span style="color:green;">Bericht succesvol verzonden.</span>';
// verstuur mailtje via phphmailer...
// Bevestiging naar gebruiker.
}
else
{
// loopen door de errors...
echo "<script> $('#MyModal').modal('show');</script>";
}
}
?>
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal"></a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<?php
foreach ($errors as $error) {
echo '<ul><li><span style="color:red;">'.$error.'</span></li></ul>';
}?>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
{
echo '<span style="color:green;">Bericht succesvol verzonden.</span>';
// verstuur mailtje via phphmailer...
// Bevestiging naar gebruiker.
}
else
{
// loopen door de errors...
echo "<script> $('#MyModal').modal('show');</script>";
}
}
?>
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal"></a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<?php
foreach ($errors as $error) {
echo '<ul><li><span style="color:red;">'.$error.'</span></li></ul>';
}?>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="contact-form" method="post" action="">
<div class="form-group">
<input type="text" name="naam" value="<?php echo test_input($_POST['naam']);?>" class="form-control" placeholder="Naam">
</div>
<div class="form-group">
<input type="text" name="email" value="<?php echo test_input($_POST['email']);?>" class="form-control" placeholder="Email" >
</div>
<div class="form-group">
<input type="text" name="onderwerp" value="<?php echo test_input($_POST['onderwerp']);?>" class="form-control" placeholder="Onderwerp">
</div>
<div class="form-group">
<textarea name="bericht" class="form-control" rows="8" placeholder="Bericht"><?php echo test_input($_POST['bericht']);?></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
<div class="form-group">
<input type="text" name="naam" value="<?php echo test_input($_POST['naam']);?>" class="form-control" placeholder="Naam">
</div>
<div class="form-group">
<input type="text" name="email" value="<?php echo test_input($_POST['email']);?>" class="form-control" placeholder="Email" >
</div>
<div class="form-group">
<input type="text" name="onderwerp" value="<?php echo test_input($_POST['onderwerp']);?>" class="form-control" placeholder="Onderwerp">
</div>
<div class="form-group">
<textarea name="bericht" class="form-control" rows="8" placeholder="Bericht"><?php echo test_input($_POST['bericht']);?></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 20/02/2017 23:56:32 door - Ariën -
Om deze direct zichtbaar te maken kun je het volgende doen:
a. Voeg de class "in" toe aan de modal:
Code (php)
1
<div class="modal in fade" tabindex="-1" role="dialog">
b. de volgende css toevoegen:
Code (php)
1
2
3
2
3
.modal.in {
display:block;
}
display:block;
}
Opmerkingen:
- Bootstrap voegt zelf ook de class "in" toe aan de modal wanneer deze zichtbaar is.
- Voeg de css in NA de bootstrap.min.css
Gewijzigd op 20/02/2017 23:18:31 door Frank Nietbelangrijk