Bootstrap模態框（一個頁面顯示多個）的使用

本文轉載自查看原文 2017-07-25 19:37 2407 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap table編輯操作的時候在模態框里加載iframe頁面（加載的頁面是在另一個頁面做編輯）的時候如何關閉模態框和刷新table VUE中如何使用bootstrap的模態框（modal） bootstrap 模態框關閉 BootStrap——模態框 Bootstrap模態彈出框 bootstrap模態框顯示時被遮罩層遮住了 bootstrap模態框modal使用remote第二次加載顯示相同內容解決辦法模態框居中顯示【詳解】模態框（modal）的使用 - bootStrap4常用CSS筆記使用Bootstrap模態框實現增刪改查功能