Confirm box/modal
Ik wil na een druk op de "Delete" button dat er een confirm box of modal o.i.d. komt en na het drukken van de "Ok" button er een record verwijdert wordt met een verwijder-bevestiging. Nu heb ik (uiteraard) hierop gegoogled maar kan geen goed voorbeeld script vinden. Weet iemand waar ik dit kan vinden of hoe ik dit aan moet pakken. O ja, ik wil wel een mooi gestylde box/modal en dus geen standaard js confirm box. Alvast bedankt voor jullie reactie
Groeten,
Frank
Maar wat mij erg verwondert is dat dit een heel vaak gebruikte methode is en dat er zo weinig voorbeeld scriptjes van zijn.
En wat betreft bootstrap, raad ik je af. Zo veel CSS en javascript inladen voor enkel een modal dat is zonde! Ga zelf alles maken. Probeer eens een modal te maken met CSS (div fixed positioneren etc) vervolgens wat leuke effectjes met javascript/jQuery toevoegen.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Als je vanuit daar bijvoorbeeld begint met
Code (php)
1
2
3
4
2
3
4
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg delete" data-toggle="modal" data-target="#modal_delete">
Delete
</button>
<button class="btn btn-primary btn-lg delete" data-toggle="modal" data-target="#modal_delete">
Delete
</button>
Wat je ook kunt doen (doe ik veel liever) is met jQuery de inhoud van de modal veranderen via een ajax call.
Code (php)
1
2
3
4
5
2
3
4
5
$(document).on('click','.delete',function(){
$.ajax('pad_naar_formulier.html').done(function(content){
$('.modal-body').html(content);
});
});
$.ajax('pad_naar_formulier.html').done(function(content){
$('.modal-body').html(content);
});
});
Toevoeging op 06/11/2013 14:15:00:
Wat Hertog Jan overigens zegt ben ik het helemaal mee eens. Ik ben zelf bezig geweest met het maken van een lightbox/modal en dan leer je ook sneller om zo iets te gebruiken maar ook naar eigen voorkeur in te stellen. Zo heb ik een lightbox gemaakt waar je 1 javascript voor moet includen en 1 div moet maken.
@Albert, bedankt voor je code ik ga hier naar kijken.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#alert {
position: absolute;
left: 25%;
right: 25%;
width: 50%;
top: 10%;
background-color: green;
color: white;
}
#remove {
float: right;
margin: 5px;
}
</style>
<div id="alert">
Record verwijderd!
<span onclick="toggle()" id="remove">×</span>
</div>
<script>
function toggle(element) {
var e = document.getElementById('alert');
e.style.display = 'none';
}
</script>
#alert {
position: absolute;
left: 25%;
right: 25%;
width: 50%;
top: 10%;
background-color: green;
color: white;
}
#remove {
float: right;
margin: 5px;
}
</style>
<div id="alert">
Record verwijderd!
<span onclick="toggle()" id="remove">×</span>
</div>
<script>
function toggle(element) {
var e = document.getElementById('alert');
e.style.display = 'none';
}
</script>
hack away...!
Gewijzigd op 08/11/2013 14:12:03 door Frank Jansen
Frank Jansen op 06/11/2013 13:34:36:
Bedankt voor jullie supersnelle reactie's. @ Michael, de confirm box van javascript vind ik niet fraai genoeg. @ Albert, de modal van bootstrap ziet er prima uit maar hoe krijg ik daar een bevestiging boodschap in?
Maar wat mij erg verwondert is dat dit een heel vaak gebruikte methode is en dat er zo weinig voorbeeld scriptjes van zijn.
Maar wat mij erg verwondert is dat dit een heel vaak gebruikte methode is en dat er zo weinig voorbeeld scriptjes van zijn.
Er is zelfs een pakket beschikbaar wat je kan gebruiken ipv de native javascript confim/alert functies:
http://bootboxjs.com