-
八度余温2018-05-02 00:00
- 11
- 42
- 0
<!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...
- 共 0 条
- 全部回答
-
遠赱┈肆方 普通会员 1楼
要解决Bootstrap模块对话框（Modal）中的透明不可见问题，可以采取以下步骤：
- 使用
z-index属性：在.modal类中添加z-index属性。这个属性可以帮助确保对话框始终在其他元素之上。例如，可以将z-index设置为9999，这样，所有其他元素（如按钮、表单等）的z-index都将低于9999。
html .modal { z-index: 9999; }- 添加
data-modal-content属性：在.modal类中添加data-modal-content属性。这个属性可以用来设置对话框的内容，使其与背景进行对比，从而使其可见。例如：
html .modal { z-index: 9999; data-modal-content: <div class="modal-content"> <!-- 内容 --> </div> } }- 使用
aria-hidden属性：在.modal类中添加aria-hidden属性。这个属性可以用于控制对话框是否在使用aria-expanded属性时被隐藏。如果对话框始终处于隐藏状态，那么可以使用aria-hidden属性来控制其可见性。例如：
html .modal { z-index: 9999; data-modal-content: <div class="modal-content"> <!-- 内容 --> </div> } .modal帘{ width: 300px; height: 100%; border-radius: 50%; overflow: auto; background-color: rgba(0,0,0,0.5); display: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-auto乡; overflow-y: auto; z-index: 9999; visibility: hidden; } }- 使用
@media查询：在.modal类中添加@media查询。这个查询可以根据设备的特性来更改对话框的样式。例如，可以添加一个@media screen and (max-width: 768px)的规则，以确保在屏幕宽度小于等于768px时，对话框可以保持完全可见。
html .modal { z-index: 9999; data-modal-content: <div class="modal-content"> <!-- 内容 --> </div> } .modal帘{ width: 300px; height: 100%; border-radius: 50%; overflow: auto; background-color: rgba(0,0,0,0.5); display: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-auto乡; overflow-y: auto; visibility: hidden; } @media screen and (max-width: 768px) { .modal帘{ display: block; } } }- 为Bootstrap模态框添加事件监听器：在
.modal类中添加事件监听器，以根据需要控制对话框的行为。例如，可以添加一个click事件监听器，以使对话框完全关闭，或者添加一个open事件监听器，以显示对话框的内容。
html .modal { z-index: 9999; data-modal-content: <div class="modal-content"> <!-- 内容 --> </div> } .modal帘{ width: 300px; height: 100%; border-radius: 50%; overflow: auto; background-color: rgba(0,0,0,0.5); display: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-auto乡; overflow-y: auto; visibility: hidden; } @media screen and (max-width: 768px) { .modal帘{ display: block; } } @media screen and (max-width: 768px) { .modal帘{ display: none; } } .modal帘.open .modal-content{ display: block; } .modal帘.open .modal-content .modal-close{ display: block; position: absolute; right: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; background-color: rgba(0,0,0,0.5); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; } .modal帘.open .modal-content .modal-close:hover{ background-color: rgba(0,0,0,0.7); } }通过这些步骤，可以解决Bootstrap模块对话框（Modal）中的透明不可见问题。
- 使用
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部