Bootstrap 模塊對(duì)話框透明不可見如何解決？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/main.css">
    <link rel="stylesheet" type="text/css" >

    <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>

    <link  rel="stylesheet" type="text/css">
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.js" type="application/javascript"></script>
   
</head>
<body>

<div class="container-fluid">

    <div class="row" style="background-color: #000000;height: 60px;">
        <span style="color: #46b8da;">歡迎</span>
        <span style="color: #46b8da;">你好：</span>


    </div>
 <div class="row" >
     <div class="col-sm-3 col-md-2 sidebar">
         <ul class="nav nav-sidebar">
             <li id="addFoodModalBtn"   class="button button-glow button-border button-rounded button-primary pull-right">添加</li>
         </ul>
     </div>


 </div>


</div>




</body>

<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="applyAddFoodModal" 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">×
                </button>
                <h4 class="modal-title">
                    填寫菜品信息
                </h4>
            </div>
            <div class="modal-body">


                <form class="form-horizontal" id="userInfoForm" onsubmit="return false" method="post">
                    <fieldset>

                        <div class="control-group">
                            <!-- Text input-->
                            <label class="control-label">名稱：</label>
                            <div class="controls">
                                <input type="text" placeholder="請(qǐng)輸入菜品名稱" class="input-xlarge" name="userNickName">

                            </div>
                        </div>
                        <div class="control-group">
                            <!-- Text input-->
                            <label class="control-label">價(jià)格：</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" name="alipayUserName">


                            </div>
                        </div>
                        <div class="control-group">
                            <!-- Text input-->

                            <div class="col-md-12">

                                <label class="control-label">圖片：</label>
                                <img src="" id="alipayImg">
                            </div>


                            <div class="controls">

                                <input type="hidden" name="alipayImgUrl"
                                       id="alipayImgUrlInput">

                            </div>
                        </div>

                    </fieldset>
                    <button class="button button-glow button-border button-rounded button-primary pull-right"
                            id="submitFoodInfoBtn" data-dismiss="modal">提交
                    </button>
                </form>


                <hr style="margin-top: 20px">
                <div class="row">
                    <div class="col-md-2">

                        <span> 上傳圖片:</span>
                    </div>
                    <form enctype="multipart/form-data">


                        <div class="form-group">
                            <input id="foodImgUrlFile" type="file" class="file"
                                   data-overwrite-initial="false" data-min-file-count="1" name="file">

                        </div>


                    </form>


                </div>


            </div>
            <div class="modal-footer">
                <button class="button button-glow button-border button-rounded button-primary pull-right"
                        data-dismiss="modal">關(guān)閉
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--end panel-->
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="responseMessageModal" 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">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    操作結(jié)果
                </h4>
            </div>
            <div class="modal-body">

                <div class="row">

                    <div class="col-md-12">
                        <span id="modalMsgSpan"></span>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">關(guān)閉
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="application/javascript">

    $(function () {
        //
        $("#addFoodModalBtn").bind("click", function () {
            $("#applyAddFoodModal").modal("show");

        })


     

        $("#submitFoodInfoBtn").bind("click", function () {


            $.ajax({
                //幾個(gè)參數(shù)需要注意一下
                type: "POST",//方法類型
                dataType: "json",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型
                url: "${pageContext.request.contextPath}/account/user/editInfo",//url
                data: $('#userInfoForm').serialize(),
                success: function (data) {
                    $('#responseMessageModal').modal();
                    $("#modalMsgSpan").text(data.msg);


                },
                error: function () {
                    alert("異常！");
                }
            });

        });


    })

</script>
</html>

**1,代碼是通過點(diǎn)擊button 顯模態(tài)對(duì)話框。
2，如果這個(gè)代碼放到html 文件中運(yùn)行點(diǎn)擊button 可以彈出模態(tài)對(duì)話框，功能正常
3，如果這個(gè)代碼放到j(luò)sp文件中，然后訪問jsp文件，點(diǎn)擊按鈕卻看不到模態(tài)對(duì)話框，只能夠看道遮罩層，
通過chrome 檢查發(fā)現(xiàn) 對(duì)話框確實(shí)存在只不過是看不見，也就是透明的，這個(gè)是為什么？**

4各位可以將代碼復(fù)制粘貼到這個(gè)在線運(yùn)行網(wǎng)站測試普通html 運(yùn)行效果，http://www.5axxw.com/tools/we...

回答

編輯回答