在一个页面显示多个模态框时要讲每个模态框用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. UVA11401-Triangle Counting-递推

    给出一个数字n,计算从1到n能组成几个不同的三角形. n的范围是10^6,大概就是递推吧.从F[i-1]到F[i]可以线性求出.要注意结果超出int. #include <cstdio> ...

  2. POJ1019-Number Sequence-数数。。

    1 12 123 1234 把数按照这样的形式拍成一排,给一个序号求出那个序号对应的数. 当出现两位数.三位数时,要麻烦的处理一下. #include <cstdio> #include ...

  3. JSP 和 Servlet 的工作原理和生命周期

    JSP的英文名叫Java Server Pages,翻译为中文是Java服务器页面的意思,其底层就是一个简化的Servlet设计,是由sum公司主导参与建立的一种动态网页技术标准.Servlet 就是 ...

  4. HSQL可视化工具

    本地使用HSQL数据库进行开发,多是集成在开发工具的内部,比如studio,往往看不到HSQL数据库,那么如何查看HSQL数据库呢? 可以使用hsql自带的可视化工具,运行hsqldb-*.jar 包 ...

  5. day14 装饰器模拟验证附加功能

    user_list=[ {'}, {'}, {'}, {'}, ] current_dic={'username':None,'login':False} def auth_func(func): d ...

  6. Leetcode 461.汉明距离 By Python

    两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = 1, y ...

  7. __AFO

    博主已退役高考,博客基本就很少回复了 NOI2018的游记也没时间写了,以后补上吧[其实是自己懒] 嗯就这样,高三加油!

  8. uoj233/BZOJ4654/洛谷P1721 [Noi2016]国王饮水记 【dp + 斜率优化】

    题目链接 uoj233 题解 下面不加证明地给出几个性质: 小于\(h[1]\)的城市一定是没用的 任何城市联通包含\(1\)且只和\(1\)联通一次 联通顺序从小到大最优 单个联通比多个一起联通要优 ...

  9. A1020. Tree Traversals

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  10. 【SPOJ10628】Count on a tree

    题目大意:给定一棵 N 个节点的树,点有点权,要求回答 M 个询问,每次询问点 u 到点 v 的简单路径(链)上权值第 K 小是多少. 题解:学习到了树上主席树. 主席树维护序列时,每次将后一个点的树 ...