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
扫一扫
9993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
