Bootstrap模态框（一个页面显示多个）的使用

在一个页面显示多个模态框时要讲每个模态框用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>
复制代码

 

posted @   QiaoZhi  阅读(4284)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示