Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
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
Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template的更多相关文章
- Create Custom Modal Dialog Windows For User Input In Oracle Forms
An example is given below to how to create a modal dialog window in Oracle Forms for asking user inp ...
- 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息
本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表
这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十节--AdminLTE模板菜单处理
上节我们把布局页,也有的临时的菜单,但是菜单不是应该动态加载的么?,所以我们这节来写菜单.首先我们看一下AdminLTE源码里面的菜单以及结构. <aside class="main- ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE模板页搭建
AdminLTE 官网地址:https://adminlte.io/themes/AdminLTE/index2.html 首先去官网下载包下来,然后引入项目. 然后我们在web层添加区域Admin以 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE引入及模板页和布局和菜单
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 AdminLTE AdminLTE 官网地址:https://adminlte.io/themes/AdminLT ...
- SharePoint 2010 Modal Dialog
SharePoint 2010 Modal Dialog Tweet Modal dialog play very important role to improve the user exper ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...
随机推荐
- C#获取运行程序的进程ID
C#获取运行程序的进程ID [DllImport("User32.dll", CharSet = CharSet.Auto)] public static extern int G ...
- SQL获取数据库中表的列名和列类型
select column_name as [字段名],data_type as [数据类型] from information_schema.columns where table_name='表名 ...
- memcached 在windows下安装及启动
memcached 在windows下安装及启动 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数, ...
- css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
- eclipse中配置maven的web项目
提高效率,一般都会使用IED如eclipse来帮助开发.eclipse中单独建立一个web项目或者是maven项目是可以通过插件很容易完成的,但是如果要结合2者,就需要先建立一个,然后再转换或使原型. ...
- hadoop基本命令1
(大讲台——国内首个it在线混合式自适应学习平台,轻量级的高薪就业和技能提升解决方案) 1.列出所有Hadoop Shell支持的命令$ bin/hadoop fs -help2.显示关于某个命令的详 ...
- js函数文件排序化
因为本人的某些小强迫症,写了一个格式化并根据js函数名排序的c++程序,此作mark #include <stdio.h> #include <map> #include &l ...
- RAC,客户端连接失败ORA-12514
今天上午,某项目运维组的同事过来求助:"某系统的应用有问题了,WEB页面打开以后出现ORACLE的ORA-12514错误,貌似监听有问题了!" 该系统的数据是采用RAC部署的模式, ...
- Extjs 更新数据集Ext.PagingToolbar的start参数重置的处理
问题:当翻页后,比如当前是第二页,start参数此时是5(初始为0),当切换左侧分类时,我们期望的是从所选分类下明细记录的第一条开始显示,结果发现不是这样,依然是从新数据的第二页开始显示,就是说ext ...
- VS2012格式化插件配置备份
VS2012联机插件AStyle --style=allman --indent=spaces=4 --align-pointer=type --align-reference=type --max- ...