Bootstrap 模块对话框透明不可见如何解决？ - 知否问答 - 万象云+社区

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <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" href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" 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>  <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">  <label class="control-label">名称：</label> <div class="controls"> <input type="text" placeholder="请输入菜品名称" class="input-xlarge" name="userNickName"> </div> </div> <div class="control-group">  <label class="control-label">价格：</label> <div class="controls"> <input type="text" class="input-xlarge" name="alipayUserName"> </div> </div> <div class="control-group">  <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">关闭 </button> </div> </div> </div> </div>   <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"> 操作结果 </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">关闭 </button> </div> </div> </div> </div> <script type="application/javascript"> $(function () { // $("#addFoodModalBtn").bind("click", function () { $("#applyAddFoodModal").modal("show"); }) $("#submitFoodInfoBtn").bind("click", function () { $.ajax({ //几个参数需要注意一下 type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 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>

回答动态