原文地址

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">&times;</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">&times;</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的更多相关文章

  1. 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 ...

  2. 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

    本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

    这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...

  4. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

  5. ABP+AdminLTE+Bootstrap Table权限管理系统第十节--AdminLTE模板菜单处理

    上节我们把布局页,也有的临时的菜单,但是菜单不是应该动态加载的么?,所以我们这节来写菜单.首先我们看一下AdminLTE源码里面的菜单以及结构. <aside class="main- ...

  6. ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE模板页搭建

    AdminLTE 官网地址:https://adminlte.io/themes/AdminLTE/index2.html 首先去官网下载包下来,然后引入项目. 然后我们在web层添加区域Admin以 ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE引入及模板页和布局和菜单

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 AdminLTE AdminLTE 官网地址:https://adminlte.io/themes/AdminLT ...

  8. SharePoint 2010 Modal Dialog

    SharePoint 2010 Modal Dialog Tweet   Modal dialog play very important role to improve the user exper ...

  9. ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...

随机推荐

  1. 解决fontawesome-webfont 被拦截的问题

    我们最近的项目是java web项目,前端采用了fontawesome-webfont,项目部署之后,图标都显示不出来,在网上学习了一大圈,找到了一个解决方案可行: web.xml中配置       ...

  2. apache 工作模式

    apache三种工作模式: prefork(2.4前默认)/worker/event(2.4默认)内容整理来自以下网站http://m.blog.csdn.net/article/details?id ...

  3. 开发APP不搞清楚这20个问题，必然沦为一场灾难

    移动经济的高速增长极大刺激了企业和个人的APP开发热情,从卖野山鸡的到卖无人机的,从老大妈到小正太都跃跃欲试,更不要说那些传统企业的信息主管们了. 面对今天如过江之鲫的APP市场,很少有人意识到,移动 ...

  4. 安装JDK设置环境变量

    PS:之前在CSDN上写的文章,现在转到博客园~ 在安装过程中第一次让选择jdk的安装路径,第二次让选择jre的安装路径.两者不可以在同一个文件夹下,否则在cmd中运行javac时会报:摘不到或无法加 ...

  5. PHP中0、空、null和false的总结

    php中很多人还不懂php中 0 , '' , null 和 false 之间的区别,这些区别有时会影响到数据判断的正确性和安全性,给程序的测试运行造成很多麻烦.另外在面试题中也会遇到这些问题,如下: ...

  6. 远程连接Ucenter数据库

    网站和Ucenter不是同一服务器的连接方法~我折腾了好几天,终于找到了这方法!各位连接不上的不妨试试~什么事只有试过才知道行不行! define('UC_CONNECT', 'mysql'); de ...

  7. Python 3.5 for windows 10 通过pip安装mysqlclient模块 error:C1083

    $pip install mysqlclient 运行结果如下: 可能是由于不兼容导致的(中间试过各种方法,比如本地安装mysql等等),最后找来mysqlclient-1.3.7-cp35-cp35 ...

  8. jQuery编写插件--封装全局函数的插件（一些常用的js验证表达式）

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  9. Linux安装包

    关于SWT SWT首先要在Eclipse中添加SWT的安装包:Windowsbuilder Pro.下载路径:http://www.eclipse.org/windowbuilder/download ...

  10. how to run demo city bars using sencha architect

    1. create a project using city bars template in sencha architect 2. save your project name as CityBa ...