在一个页面显示多个模态框时要讲每个模态框用div包裹起来，否咋会产生格式错误。

<html>

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="../css/bootstrap.min.css">

        <script src="../js/jquery-1.11.3.min.js"></script>

        <script src="../js/bootstrap.js"></script>

    </head>

    <body>

        <div>

            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#excel">下载Excel模板</button>

            <!-- Excel模态框（Modal） -->

            <div class="modal fade" id="excel" 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" aria-hidden="true">&times;</button>

                            <h4 class="modal-title" id="myModalLabel">下载Excel模板</h4>

                        </div>

                        <form action="${pageContext.request.contextPath }/exportWebExcel" method="post">

                            <div class="modal-body">

                                单选题数量:&nbsp;&nbsp;<input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量:&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br />

                            </div>

                            <div class="modal-footer">

                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                                <input type="submit" class="btn btn-primary" value="确认">

                            </div>

                        </form>

                    </div>

                    <!-- /.modal-content -->

                </div>

                <!-- /.modal -->

            </div>

            <p></p>

            <!-- -------------------多个模态框样式套用有冲突，解决的办法很简单，用DIV将每个dialog的代码片段包裹一下-------------------------------------------- -->

            <p></p>

            <div>

                <!-- 按钮触发模态框 -->

                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#wordMT">下载Word模板</button>

                <!-- Excel模态框（Modal） -->

                <div class="modal fade" id="wordMT" 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" aria-hidden="true">&times;</button>

                                <h4 class="modal-title" id="myModalLabel">下载Word模板</h4>

                            </div>

                            <form action="${pageContext.request.contextPath }/exporWebWord" method="post">

                                <div class="modal-body">

                                    单选题数量:&nbsp;&nbsp;<input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量:&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br />

                                </div>

                                <div class="modal-footer">

                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                                    <input type="submit" class="btn btn-primary" value="确认">

                                </div>

                            </form>

                        </div>

                        <!-- /.modal-content -->

                    </div>

                    <!-- /.modal -->

                </div>

    </body>

</html>

Bootstrap模态框（一个页面显示多个）的使用的更多相关文章

  1. （转）解决bootstrap 模态框的页面抖动

    使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...

  2. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  3. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  4. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  6. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

  7. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  8. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

  9. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  10. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

随机推荐

  1. window.onload和document.ready

    浏览器解析大致有以下几个步骤: (1)    解析HTML结构 (2)       加载外部脚本和样式 (3)       解析并执行脚本代码 (4)       构造HTML DOM 模型 (5)  ...

  2. Ouroboros Snake POJ - 1392（数位哈密顿回路）

    看hdu 2894的题意  两个题一样 旋转鼓的表面分成m块扇形,如图所示(m=8).图中阴影区表示用导电材料制成,空白区用绝缘材料制成,终端a.b和c是3(k=3)处接地或不是接地分别用二进制信号0 ...

  3. day28 反射 属性操作 getattr hasattr setattr delattr

    反射 用字符串来对应其同名的属性或者方法,通过某种方法调用这个字符串来执行方法或者获取属性 网络编程的时候非常好用,是很重要的内容 先看个示例吧: class Teather: dic = { &qu ...

  4. Java中浮点型数据Float和Double进行精确计算的问题

    Java中浮点型数据Float和Double进行精确计算的问题 来源  https://www.cnblogs.com/banxian/p/3781130.html 一.浮点计算中发生精度丢失     ...

  5. 02 自学Aruba之无线频段---ISM频段及UNII频段

    点击返回:自学Aruba之路 02 自学Aruba之无线频段---ISM频段及UNII频段 1. 无线频段-ISM频段 ISM频段即工业,科学和医用频段.一般来说世界各国均保留了一些无线频段,以用于工 ...

  6. 架构师成长之路4.4-多维监控体系_zabbix

    点击返回架构师成长之路 点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 架构师成长之路4.4-多维监控体系_zabbix 自学Zabbix之路[第 ...

  7. cf1063A Oh Those Palindromes (贪心)

    给一些字符 求它们能拼成的字符串 的回文子串的个数最大值 对应的那个字符串 就是把相同的都放一起是最优的,排下序就行了... #include<bits/stdc++.h> #define ...

  8. volatile的内存语义

    volatile的特性 理解volatile特性的一个好方法是把对volatile变量的单个读/写,堪称是使用同一个锁对这些单个读/写操作做了同步. 锁的happens-before规则保证释放锁和获 ...

  9. 逆向---02.je & jmp & jnz 、OD调试

    上一篇:逆向---01.Nop.中文字符串搜索.保存修改后程序 OD调试基础:(01.02篇练手工具:https://pan.baidu.com/s/1kW2qlCz) nop是删除跳转,你别问我,我 ...

  10. 【ATcoder】Xor Sum 2

    题目大意:给定一个 N 个点的序列,求有多少个区间满足\(\oplus_{i=l}^ra[i]=\sum\limits_{i=l}^ra[i]\). 题解: 小结论:\(a\oplus b=a+b\r ...