Bootstrap dynamicModal Plugin
Mit diesem Plugin lassen sich Modals im Bootstrap anhand vordefinierter Optionen dynamisch generieren. Für Web-Projekte, die viele Modals beanspruchen, ist dieses Plugin gut geeignet. Mit diesem Plugin muss man nämlich nicht für jedes Modal einen separaten
HTML-Code schreiben, man muss lediglich die Modals mit diesem Plugin generieren.
Ein besonderes Feature dieses Plugins ist das Bootstap DateTimePicker Plugin. Das kann man in einem Modal laden und das gewünschte Datum beziehungsweise die gewünschte Zeit an ein Input weitergeben.
Requirements
Bootstrap v3.+
jQuery
Bootstrap DateTime Picker v2
Optionen
ID | Modal ID |
CLS | Modal Class |
Title | Modal Title |
Content | Der Inhalt, der im Modal platziert werden soll |
Buttons | Ein Object, das eine Liste von Buttons-Parameter enthält, z.B.: { text:'Do something', // Button-Text id:'doSomthing', // Button-ID cls:'btn-primary' // Button-Class } |
DateTimePicker | Ein Objekt, das die Parameter des Plugins „Bootstrap DateTimePicker“ definiert Wie das Plugin funktioniert erfährt man auf der Plugin-Webseite: www.malot.fr/bootstrap-datetimepicker/ |
Usage
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Click to open Modal</button>
$('body').dynamicModal({
id:'mymodal',
cls:mymodal',
title:'My modal',
content:'<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>.',
buttons:[{
cancel:true,
text:'Cancel',
id:'cancel',
cls:'btn-default'
},
{
text:'Do something',
id:'doSomthing',
cls:'btn-primary'
}]
})