Bootstrap 在 spring 引导项目中使用 apache tiles 框架时，模式弹出窗口在 jsp 文件中不起作用

Question

我在 spring 引导 Web 应用程序中使用 bootstrap 使用了 bootstrap 的可能功能，如 SB admin、data-table 等，它们对我来说都很好用现在我正在尝试使用 bootstrap 模型弹出窗口，但它对我不起作用这里是我的 jsp 代码

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
    <!DOCTYPE html>
    <html lang="pt-BR" id="ng-app" ng-app="">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- CSS import -->
        <link rel='stylesheet' href='<c:url value="/resources/css/signin.css" />' type='text/css' media='all' />
        <link rel='stylesheet' href='<c:url value="/resources/css/style.css" />' type='text/css' media='all' />     
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" />
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />
        <link rel='stylesheet' href='<c:url value="/resources/css/logoutPanel.css" />' type='text/css' media='all' />

        <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.js"></script> 
        <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.min.js"></script>
        <script src='<c:url value="/resources/js/web3.min.js" />'></script> 
        <script src='<c:url value="/resources/js/solidity.js" />'></script>  
     </head>
        <body>
                <div class="header">
                <div class="logoDiv"><img src='<c:url value="/resources/images/logoWhite.png" />' class="logo top-margin-small"></div>
                <div class="titleDiv"><h1 class="top-margin-small"> Asset management</h1></div>
                </div> 
                <div class="container">
            <input type="hidden" id="userId" value="${userId}">
            <button type="button" class="btn btn-info btn-sm" id="back_to_dashboard" aria-label="back to Dashboard" style="border: 0px;margin-top:10px;">
                <a href="/admin/home"><span class="glyphicon glyphicon-chevron-left" style="color: #a6dfe7; font-size: 20px; vertical-align: middle;"
                    aria-hidden="true"></span> Dashboard</a>
            </button>
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <form:form action="/save/asset" method="POST" modelAttribute="asset" class="form-user-registration">
            <h2 class="form-user-registration-heading">New Asset</h2>
            <div>
                <label for="assetCode" class="sr-only">Code </label>
                <form:input path="assetCode" id="assetCode" class="form-control" placeholder="Asset Code"/>
                <span class="error"><p id="asset_code_error"></p></span>
                <form:errors path="assetCode" cssClass="error" />
            </div>


            <div>
                <label for="assetName" class="sr-only">Asset Name </label>
                <form:input path="assetName" id="assetName" class="form-control" placeholder="Asset Name"/>
                <span class="error"><p id="asset_name_error"></p></span>
                <form:errors path="assetName" cssClass="error" />
            </div>

            <div>
                <label for="assetType" class="sr-only">Asset Type</label> 
                <form:input path="assetType" id="assetType" class="form-control" placeholder="Asset Type"/>
                <span class="error"><p id="asset_type_error"></p></span>
                <form:errors path="assetType" cssClass="error"/>
            </div>

            <div>
                <label for="assetDescription" class="sr-only">Asset Description</label> 
                <form:textarea path="assetDescription" id="assetDescription" class="form-control" placeholder="Asset Description"/>
                <span class="error"><p id="asset_description_error"></p></span>
                <form:errors path="assetDescription" cssClass="error"/>
            </div>

           <div>
                <label for="assetStatusId" class="sr-only">Asset Status</label> 
                <form:select path="assetStatusId" id="assetStatusId" class="form-control" name="assetStatusId">
                        <form:option value="1">Available</form:option>
                        <form:option value="2">Allocated</form:option>
                        <form:option value="3">Damaged</form:option>
                </form:select>
                <form:errors path="assetStatusId" cssClass="error"/>
           </div>

           <div>
                    <c:choose>
                        <c:when test="${edit}">
                            <input type="button" id="update" value="Update" class="form-user-registration-button btn btn-success" />
                        </c:when>
                        <c:otherwise>
                            <input type="button" id="register" value="Register" class="form-user-registration-button btn btn-success"/>
                        </c:otherwise>
                    </c:choose>

                    <input type="button" class="form-user-registration-button btn btn-primary" value="Reset" id="resetAssetsDetails">

           </div>
        <div id="result" class="result-div"></div>
        </form:form>

                    <!-- blockchain progress popup -->
            <div class="modal fade" id="myModal" role="dialog" data-keyboard="true" tabindex='-1'>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Blockchain progress</h4>
                        </div>

                        <div id="progressDiv">
                            <div id="progress">
                                <div id="bar"></div>
                            </div>
                            <div class="col-lg-4"></div>
                            <div class="col-lg-8 padd10">
                                <label>1. Transaction Sent<img src='<c:url value="/resources/images/tick.png" />' width="20px"/></label>
                                <br>
                                <label id="step2" hidden>2. Transaction Id received<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
                                <br>
                                <label id="step3" hidden>3. Mining in progress<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
                                <br>
                                <label id="step4" hidden>4. Mining completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
                                <br>
                                <label id="step5" hidden>5. Transaction completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
                            </div>
                            <br>
                            <br>

                        </div>
                        <div class="modal-footer noborder">
                            <button type="button" class="btn btn-default" id="closeButton" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        <!-- end blockchain progress popup -->  

    </div>      
    <script src='<c:url value="/resources/js/newAsset.js" />'></script> 
        <div class="footer">
    <img src='<c:url value="/resources/images/poweredBy.png"/>' class="powered-by-logo"/>
</div>                  
        </body><!-- body close here -->

    </html><!-- /html -->

我试过使用切换按钮和 Jquery 打开弹出窗口我用过的切换按钮

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

对于jquery我已经使用

$("#myModal").modal("show");

和

$("#myModal").modal("toggle");

我已经阅读了一些关于相同问题的帖子并尝试解决这个问题，但结果还是一样。

提前致谢。

Answer 1

问题出在您的 bootstrap 版本中，尝试用这个替换您的实际版本：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap 在 spring 引导项目中使用 apache tiles 框架时，模式弹出窗口在 jsp 文件中不起作用

Bootstrap modal popup not working in jsp file while using apache tiles framework in spring boot project

javascript

jsp

apache-tiles

bootstrap-modal

bootstrap-4