在一个页面显示多个模态框时要讲每个模态框用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. UOJ33 [UR #2] 树上GCD 【点分治】【容斥原理】【分块】

    题目分析: 树上点对问题首先想到点分治.假设我们进行了点分治并递归地解决了子问题.现在我们合并问题. 我们需要找到所有经过当前重心$ c $的子树路径.第一种情况是LCA为当前重心$ c $.考虑以$ ...

  2. LOJ #6432. 「PKUSC2018」真实排名(组合数)

    题面 LOJ #6432. 「PKUSC2018」真实排名 注意排名的定义 , 分数不小于他的选手数量 !!! 题解 有点坑的细节题 ... 思路很简单 , 把每个数分两种情况讨论一下了 . 假设它为 ...

  3. tf 常用函数 28原则

    一个tensorflow图由以下几部分组成: 占位符变量(Placeholder)用来改变图的输入. 模型变量(Model)将会被优化,使得模型表现得更好. 模型本质上就是一些数学函数,它根据Plac ...

  4. SSM框架中的前后端分离

    认识前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端. ...

  5. hdu 2577 How to Type(dp)

    Problem Description Pirates have finished developing the typing software. He called Cathy to test hi ...

  6. 【LOJ#6281】数列分块5

    题目大意:维护一个有 N 个数组成的序列,支持查询区间元素和.区间元素向下取整的开方操作. 题解:由于序列中维护的数最大不超过整数的范围,而对于整数范围内的数来说,一个数在开方 5 次及以上时,结果不 ...

  7. 使用C#实现实体类和XML相互转换

    一.实体类转换成XML 将实体类转换成XML需要使用XmlSerializer类的Serialize方法,将实体类序列化 public static string XmlSerialize<T& ...

  8. MATLAB：图形加法运算（imadd函数）

    close all; %关闭当前所有图形窗口,清空工作空间变量,清除工作空间所有变量 clear all; clc; I=imread('rice.png'); %读入图像rice,赋值给I J=im ...

  9. 约会 音频mm教你追女孩

    微信吧地址发给他人. 美团提前选好环境然后提前打电话订购一个位置. 微博作用是为:更多的谈资.热搜 ,最近上榜的话题说. 打车软件: 地图: 2.外表: 下澡,指甲,胡子,发型,适合服装.发型和服装搭 ...

  10. PrintNumber.java

    /****************************************************************************** * Compilation: javac ...