极客观点
项目管理
HarmonyOS
选择游戏服后，下边的这些列表，通过ajax塞进去的，然后点击执行一，执行二的按钮，会调动一个弹窗，但弹窗时候，会带了其他div层一起弹出来的
贴一些代码
{% extends "base.html" %}
{% block body %}
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="z-index:9999;position: relative;">
<div class="ibox-title">
<h5>Custom responsive table </h5>
</div>
<div class="ibox-content">
<div class="row">
<select class="form-control m-b" name="group_name" id="group_id">
<option value="">选择服务器</option>
{% for pro_i in pro_groups %}
<option value="{{ pro_i.id }}">{{ pro_i.group_name }}</option>
{% endfor %}
</select>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>游戏项目</th>
<th>更新游戏服</th>
<th>操作</th>
</tr>
</thead>
<tbody id="ossfile-tab-body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" 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" id="modal_userId">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="modal_user" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
{% endblock %}
{% block comm_js %}
<script type="text/javascript">
$('#group_id').change(function () {
var group_id = $("#group_id").val();
$.ajax({
data: {'group_id': group_id, csrfmiddlewaretoken: '{{ csrf_token }}'},
type: 'POST',
url: '/pro1/gamebuild/' + group_id + '/',
success: function (data) {
var json_data = JSON.parse(data);
var content = '';
$.each(json_data, function (i, item) {
content += ' <tr> <td>' + item.groupname + '</td> ' +
'<td>' + item.game_name + '</td> ' +
'<td><div class="font-bold">' +
'<button class="btn btn-info " id= \'+ item.id +\'version_value="trunk" type="button" onclick="Trunk(this)">' +
'<i class="fa fa-paste"></i> 执行一</button>' +
'<button class="btn btn-danger" id= '+ item.id +'version_value="branch" type="button" onclick="Branch(this)">' +
'<i class="fa fa-trash"></i> <span class="bold">执行二</span></button>' +
'</div></td></tr>'
});
$("#ossfile-tab-body").html(content)
}
})
});
function Trunk(obj) {
var version_value = $(obj).attr("version_value");
var id = $(obj).attr("id");
{#alert(version_value);#}
$('#myModalLabel').html('版本更新。');
$('#modal_userId').html('确认更新: ' + version_value + ' ?');
$('#myModal').modal('show');
}
</script>
{% endblock %}
查查 css, 确保不是“实时编译日志”的 z-index 出了问题
另外就是把页面内容一点一点清干净直至只剩下 modal 和出问题的 div
检查一下各个 dom 的关闭是否正确，不要不小心吧其他 div 包裹进来了。