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