在一个页面显示多个模态框时要讲每个模态框用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. 【总结】 Lucas定理

    \(Lucas\)定理: \(C^x_y≡C^{x/p}_{y/p}*C^{x\%p}_{y\%p} ~~(mod~p)\) 证明不会2333 void pre(){ A[0]=A[1]=B[0]=B ...

  2. 【BZOJ2244】[SDOI2011]拦截导弹（CDQ分治）

    [BZOJ2244][SDOI2011]拦截导弹(CDQ分治) 题面 BZOJ 洛谷 题解 不难发现这就是一个三维偏序+\(LIS\)这样一个\(dp\). 那么第一问很好求,直接\(CDQ\)分治之 ...

  3. 【转】STC51单片机下载程序的时候不要在VCC端接DHT11

    今天使用51单片机学习板调试DHT11湿度传感器,下载程序的时候把DHT11烧掉了. 一开始我使用杜邦线把DHT11的VCC引脚接到学习板上的VCC端,GND接GND,数据端口接51单片机的P0.0. ...

  4. RabbitMQ安装详解

    # RabbitMQ 消息中间件 一.安装:#安装epel源[EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包)rpm -Uvh htt ...

  5. 爬楼梯问题 leetcode70

    假设你正在爬楼梯,需要n阶你才能到达楼顶,n是正整数 每次你可以爬1或2个台阶,有多少种不同的方法可以爬到楼顶 当n=1时,steps=1 当n=2时,1+1,2 steps=2 当n=3时,1+1+ ...

  6. 猜数字小游戏，很naive......

    这里用到了随机数生成器以及ctime #include <cstdio> #include <cstdlib> #include <ctime> #include ...

  7. [luoguU42591][小T的绝对值]

    luoguU42592 20分思路 对给出的序列求出前缀和,然后\(n^2\)暴力枚举即可拿到第一档分 40分思路 对于数列中的数都相同的情况.只需要特判即可.只要特别注意全都是0的情况即可. 100 ...

  8. Windows 服务程序、窗口界面、桌面交互、与远程桌面

    昨天用c写了一个windows服务(服务内部带一个gui窗口+系统托盘),在windows xp sp3上测试,启动服务后,系统托盘显示正常. 但在另一台windows 2003 sp2 上测试(通过 ...

  9. redis前端启动和后台启动的区别

    Part I. 直接启动下载官网下载安装tar zxvf redis-2.8.9.tar.gzcd redis-2.8.9#直接make 编译make#可使用root用户执行`make install ...

  10. 线程的状态有哪些，线程中的start与run方法的区别

    线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法. ...