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在每次执行命令的时候会生成新的 ...
随机推荐
- 控制 WAP 网站上输入框的默认类型
比如手机号,卡输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘.www . c s d n 1 2 3 . com/html/itweb/20130802/36036_36043_36004 ...
- 【原】yield的最基本用法
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Itca ...
- CSS浮动特性总结
1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...
- 配置 Struts2 Hello World
http://javaweb.group.iteye.com/group/wiki/1505-struts2-under-helloworld---how-to-make-the-first-of-t ...
- err: exp-00056 rra-12154 exp-00000
一直用的是win7系统+oracle11g r1 server端(后简称r1). 由于工作需要装了oracle11g r2 client端(后简称r2). 在装r2之前,r1的导出exp是没有问题的. ...
- linux日志审计项目案例实战(生产环境日志审计项目解决方案)
所谓日志审计,就是记录所有系统及相关用户行为的信息,并且可以自动分析.处理.展示(包括文本或者录像) 推荐方法:sudo配合syslog服务,进行日志审计(信息较少,效果不错) 1.安装sudo命令. ...
- 利用 runtime,解决多次点击相同 button,导致重复跳转的问题-b
当app有点卡的时候,多次点击相同的button,经常出现,跳转了N次相同的界面(比如闲鱼) 解决办法 用运行时和分类,替换 UIControl 响应事件,根据响应的间隔时间来判断是否执行事件. 详细 ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- C#变成数据导入Excel和导出Excel
excel 基础 •整个excel 表格叫工作表:workbook:工作表包含的叫页:sheet:行:row:单元格:cell. •excel 中的电话号码问题,看起来像数字的字符串以半角单引号开头就 ...
- [转载]MongoDB学习(二):数据类型和基本概念
数据类型 基本数据类型 MongoDB的文件存储格式为BSON,同JSON一样支持往其它文档对象和数组中再插入文档对象和数组,同时扩展了JSON的数据类型.与数据库打交道的那些应用.例如,JSON没有 ...