Walid Awad
Bootstrap dynamicModal Plugin
In this particular tutorial I will explain how the plugin Bootstrap dynamicModal works.
dynamicModal is a plugin that dynamically generates the modals with Bootstrap.
Firstly, create a HTML website and include all the essential Bootstrap CCS, JavaScript and jQuery files.
Here is an example of a simple Bootstrap HTML website:
<!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
Here is an example for a Bootstrap modal with Content and 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
The following example shows how the modal can be generated with several buttons and contents:
<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>
Loading the Bootstrap Date Time Picker Plugin into a Modal.
With Bootstrap Dynamic Modal it is possible to load the Bootstrap DateTimePicker into a modal. The requested date will be transfered to an input when clicking.
<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/yyyy h:i:s'
},
buttons:[{
cancel:true,
text:'Cancel',
id:'cancel',
cls:'btn-default'
}]
})
</script>
