Create modal dialog form in jquery using bootstrap framework, slightly different from the usual way of jquery-ui. In bootstrap tutorial, we create modal dialog form like the example below
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!-- Button trigger modal --><button type="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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></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>
</div>
</div> |
Some of the rules on the use of the bootstrap modals as quoted on the bootstrap’s official website is as follows
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.Modal markup placement
Always try to place a modal’s HTML code in a top-level position
in your document to avoid other components affecting the modal’s
appearance and/or functionality.Mobile device caveats
There are some caveats regarding using modals on mobile devices.
Let’s try to create a dynamic modal form in the bootstrap
1. Make sure you have adminLTE bootstrap template, please download from the official website.
2. In bootstrap, we have 3 optional modal form dialog sizes (Large,Standart,Small).
3. There are 3 classes in the modal-dialog content creation
|
1
2
3
|
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
|
4. Create php file as modals.php and copy this code below
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html><html> <head>
<meta charset="UTF-8">
<title>Dynamic modal dialog form bootstrap</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-black">
<?php include "layout/header.php" ?>
<div class="wrapper row-offcanvas row-offcanvas-left">
<?php //include "layout/left_sidebar.php" ?>
<aside class="right-side">
<section class="content-header">
<h1>
How to create Dynamic modal dialog form bootstrap
</h1>
</section>
<section class="content" >
<div class="box box-primary">
<div class="row">
<div class="col-md-2">
<select class="form-control" id="mysize">
<option value="small">Small</option>
<option value="standart">Standart</option>
<option value="large">Large</option>
</select>
</div>
</div><br/>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg" onClick="open_container();" > Launch demo modal</button>
</div>
</div>
<!-- Modal form-->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body" id="modal-bodyku">
</div>
<div class="modal-footer" id="modal-footerq">
</div>
</div>
</div>
</div>
<!-- end of modal ------------------------------>
</div>
</section><!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<script src="../js/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
</body>
</html> |
To create dynamic modal dialog form ,we need create javascript function , copy this javascript code in above “</body>” code
|
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
|
<script language="javascript">
function open_container()
{
var size=document.getElementById('mysize').value;
var content = '<form role="form"><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>';
var title = 'My dynamic modal dialog form with bootstrap';
var footer = '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button>';
setModalBox(title,content,footer,size);
$('#myModal').modal('show');
}
function setModalBox(title,content,footer,$size)
{
document.getElementById('modal-bodyku').innerHTML=content;
document.getElementById('myModalLabel').innerHTML=title;
document.getElementById('modal-footerq').innerHTML=footer;
if($size == 'large')
{
$('#myModal').attr('class', 'modal fade bs-example-modal-lg')
.attr('aria-labelledby','myLargeModalLabel');
$('.modal-dialog').attr('class','modal-dialog modal-lg');
}
if($size == 'standart')
{
$('#myModal').attr('class', 'modal fade')
.attr('aria-labelledby','myModalLabel');
$('.modal-dialog').attr('class','modal-dialog');
}
if($size == 'small')
{
$('#myModal').attr('class', 'modal fade bs-example-modal-sm')
.attr('aria-labelledby','mySmallModalLabel');
$('.modal-dialog').attr('class','modal-dialog modal-sm');
}
}
</script>
|
Very fun to create a website using bootstrap as web templates.
Similarly, how to create a dynamic modal dialog form using bootstrap
adminLTE. Click here to see demo or visit here to read my another bootstrap tutorial