Bootstrap dynamicModal Plugin
In diesem Tutorial wird es erklärt, wie das Plugin Bootstrap dynamicModal funktioniert. Bootstrap dynamicModal ist ein einfaches Plugin, das zum dynamischen generieren von Modals mit Bootstrap dient. Zuerst erstellen wir eine HTML-Seite und binden die notwendigen Bootstrap CCS,
JavaScript und jQuery Files ein.
Eine einfache Bootstrap HTML-Seite sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Bootstrap dynamicModal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="css/bootstrap.dynamicModal.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap.dynamicModal.js"></script>
</body>
</html>
Simple Modal
Hier ein Beispiel für ein Bootstrap Modal mit Content und Cancel-Button.
<button class="btn btn-primary" data-toggle="modal" data-target="#simple_modal"> Launch simple modal </button>
<script>
$('body').dynamicModal({
id:'simple_modal',
cls:'simple_modal',
title:'Simple modal',
content:'<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>',
buttons:[{
cancel:true,
text:'Cancel',
id:'cancel',
cls:'btn-default'
}]
})
<script>
Multi-Buttons Modal
Das folgende Beispiel zeigt, wie ein Modal sich mit mehreren Buttons und Contents generieren lässt.
<button class="btn btn-primary" data-toggle="modal" data-target="#multi_buttons_modal"> Launch multi-buttons modal </button>
<script>
$('body').dynamicModal({
id:'multi_buttons_modal',
cls:'multi_buttons_modal',
title:'Multi-Buttons modal',
content:'<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>',
buttons:[{
cancel:true,
text:'Cancel',
id:'cancel',
cls:'btn-default'
},
{
text:'Primary',
id:'primary',
cls:'btn-primary'
} ,
{
text:'Success',
id:'success',
cls:'btn-success'
},
{
text:'Info',
id:'info',
cls:'btn-info'
},
{
text:'Warning',
id:'warning',
cls:'btn-warning'
},
{
text:'Danger',
id:'danger',
cls:'btn-danger'
}]
})
</script>
Bootstrap Date Time Picker Plugin in einem Modal laden.
Mit Bootstrap Dynamic Modal lässt sich das Plugin Bootstrap DateTimePicker in einem Modal laden. Das gewünschte Datum wird beim Anklicken an ein Input weitergegeben.
<input name="datetime_field" id="datetime_field" type="text" class="form-control" data-toggle="modal" data-target="#datetime_modal">
<script>
$('body').dynamicModal({
id:'datetime_modal',
cls:'datetime_modal',
title:'Datetime Modal',
datetimepicker:{
language:'en',
format: 'd/m/Y h:i:s ',
minView:0,
maxView:1,
showMeridian: 1,
linkField:'datetime_field',
linkFormat:'d/m/Y h:i:s'
},
buttons:[{
cancel:true,
text:'Cancel',
id:'cancel',
cls:'btn-default'
}]
})
</script>
