Bootstrap 模块对话框 透明不可见 如何解决？
<!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" 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>
<!-- 模态框（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="请输入菜品名称" class="input-xlarge" name="userNickName">
</div>
</div>
<div class="control-group">
<!-- Text input-->
<label class="control-label">价格：</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">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--end panel-->
<!-- 模态框（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">
操作结果
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<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>
**1,代码是 通过点击button 显模态对话框。
2，如果这个代码放到html 文件中运行 点击button 可以弹出模态对话框 ，功能正常
3，如果这个代码放到jsp文件中，然后访问jsp文件，点击按钮 却看不到 模态对话框，只能够看道遮罩层，
通过chrome 检查发现 对话框确实存在 只不过是看不见，也就是透明的，这个是为什么？**
4各位 可以将 代码复制 粘贴到 这个在线运行 网站测试 普通html 运行效果，http://www.5axxw.com/tools/we...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
用
chrome检查元素看看computed样式，确认下是什么属性影响的，我怀疑是和你们项目中的其他css rule冲突了