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在每次执行命令的时候会生成新的 ...
随机推荐
- 支持阻塞操作和轮询操作的globalfifo设备驱动代码分析以及测试代码
#include <linux/module.h> #include <linux/types.h> #include <linux/fs.h> #include ...
- Silverlight之我见
好长时间没搞Silverlight方面的开发了,原本都以为自己早已忘记,然而前阵子(确切一点说,是挺长时间以前了)的时候,发布Windows10的时候,微软宣布新的浏览器将重新开发,关键是后半句引起了 ...
- 使用memcache(thinkphp框架学习)
$memcache = new Memcache; $memcache->connect("localhost",11211); $memcache->set('sxt ...
- C语言小知识
1.数组初始化 a[5] = {1}; //1,0,0,0,0 a[5] = {0}; //0,0,0,0,0 a[3][3] = {1}; //1,0,0;0,0,0;0,0,0 a[3][ ...
- 开发设计模式（九）门面模式（Facade Pattern）
什么是门面模式? 门面模式要求一个子系统的外部与其内部的通信必须通过一个统一的门面(Facade)对象进行.门面模式提供一个高层次的接口,使得子系统更易于使用. 大家都写过纸质的信件吧,比如给女朋友写 ...
- UIScrollView解决touchesBegan等方法不能触发的解方案
新建一个类继承自UIScrollView 并重写下面的方法 -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [su ...
- 洛谷 P1417 烹调方案
题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船飞到一半,gw发现了一个很严重的问题:肚子饿了~ gw还是会做饭的,于是拿出了储藏的 ...
- 【深度学习系列2】Mariana DNN多GPU数据并行框架
[深度学习系列2]Mariana DNN多GPU数据并行框架 本文是腾讯深度学习系列文章的第二篇,聚焦于腾讯深度学习平台Mariana中深度神经网络DNN的多GPU数据并行框架. 深度神经网络( ...
- Win7 & Win 8系统更新失败的解决
转自:Win 8系统更新失败的解决(原创) 这几天win 8又出了一大堆更新,而且是一更新完就要重启,重启之后照例要进入更新包的安装过程.不爽的是,屡屡在重启后出现"配置Windows更新失 ...
- 图文详解如何搭建Windows的Android C++开发环境
原地址:http://www.apkbus.com/android-18595-1-1.html //================================================= ...