我对部分视图使用了引导程序和模态，在获取数据的同时，我将“加载” div置于所有内容的前面。我不能将loading div放在模态前面，该模态已经用z-index尝试过了，但是还是没有。
这是我的CSS：
.load {
position: absolute;
z-index: 500 !important;
height: 100%;
display: none;
border: 0;
padding: .5em 1em;
overflow: auto;
top: 0%;
left: 0%;
background: white;
width: 100%;
border: none;
opacity: 0.8;
}
.imagen_loading {
position: absolute;
z-index: 500 !important;
top: 35%;
left: 43%;
width: 300px;
height: 300px;
background: url('../../Content/img/gif/loader3.gif')
}
这是我的模态：
<div class="modal fade" id="modal_aprobar_transferencia" data-target="#modal_aprobar_transferencia">
<div class="modal-dialog">
<div class="modal-content" style="overflow:auto; width:90% !important; height:90% !important;">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><strong></strong>Transfers</h4>
</div>
<div class="modal-body">
@{
Html.RenderAction("lista_transferencias", "Almacen");
}
</div>
</div>
</div>
</div>
编辑：
<div class="container-fluid" style="padding-left:7em; padding-right:3em;">
<h3>Storehouse</h3>
<div class="row barra_menu" style=" ">
<div class="" style="float:left;">
<button type="button" class="btn btn-lg btn-info" href="#modal_formulario_altas" data-toggle="modal">
Receives
</button>
</div>
<div class="dropdown">
<button type="button" class="btn btn-lg btn-info dropdown-toggle" data-toggle="dropdown" style="float:left;">
Transfers <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#modal_formulario_transferencias" data-toggle="modal">New transfer</a>
<a href="#modal_nuevos_sellos" data-toggle="modal">New seal package</a>
<a href="#modal_aprobar_transferencia" data-toggle="modal">See transfers</a>
<a href="#modal_recibir_transferencias" data-toggle="modal" class="btn_recibir_transferencia">Receive transfers</a>
</li>
</ul>
</div>
<div class="modal fade" id="modal_nuevos_sellos" data-target="#modal_nuevos_sellos">
<div class="modal-dialog" style="width:30% !important; height:15% !important;">
<div class="modal-content">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><strong></strong>Add seal package</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-group col-3">
<label for="caja_inicio">First seal </label>
<input type="text" class="form-control numeric must " onkeydown="upperCaseF(this)" id="caja_inicio">
</div>
<div class="form-group col-3">
<label for="caja_final">Last seal</label>
<input type="text" class="form-control numeric must " onkeydown="upperCaseF(this)" id="caja_final">
</div>
<div class="form-group col-3">
<label for="caja_sucursal">Branch office </label>
<select type="text" class="form-control" id="caja_sucursal">
<option>Select</option>
<option value="1">Fortune</option>
<option value="2">Lucky one</option>
</select>
</div>
<div class="form-group col-3">
<br />
<button type="button" class="btn btn-primary mb-2" id="boton_guardar_sello" onclick="guardar_sellos_index(event);">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_aprobar_transferencia" data-target="#modal_aprobar_transferencia">
<div class="modal-dialog">
<div class="modal-content" style="overflow:auto; width:90% !important; height:90% !important;">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><strong></strong>Approval of transfers</h4>
</div>
<div class="modal-body">
@{
Html.RenderAction("lista_transferencias", "Almacen");
}
</div>
</div>
</div>
</div>
<!----LISTADO DE INVENTARIO----->
<div class="panel panel-default panel-primary">
<div class="panel-heading"><h4>Inventory</h4></div>
<div style="padding:1em; overflow:auto; ">
<table id="tabla_inventario" class="table table-striped ">
<thead>
<tr>
<th>@Html.DisplayNameFor(model => model.id_inventario)</th>
<th>@Html.DisplayNameFor(model => model.sucursal)</th>
<th>@Html.DisplayNameFor(model => model.po)</th>
<th>@Html.DisplayNameFor(model => model.mill_po)</th>
<th>@Html.DisplayNameFor(model => model.total)</th>
<th>@Html.DisplayNameFor(model => model.categoria_inventario)</th>
<th>@Html.DisplayNameFor(model => model.descripcion)</th>
<th>@Html.DisplayNameFor(model => model.estado)</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.id_inventario)</td>
<td>@Html.DisplayFor(modelItem => item.sucursal)</td>
<td>@Html.DisplayFor(modelItem => item.po)</td>
<td>@Html.DisplayFor(modelItem => item.mill_po)</td>
<td>@Html.DisplayFor(modelItem => item.total)</td>
<td>@Html.DisplayFor(modelItem => item.categoria_inventario)</td>
<td>@Html.DisplayFor(modelItem => item.descripcion)</td>
<td>@Html.DisplayFor(modelItem => item.estado)</td>
<td>
<button type="button" onclick="ver_item(@item.id_inventario)" class="btn btn-default glyphicon glyphicon-search " style="color:black; padding:0px 5px 0px 5px;"></button>
<a href="#" class="btn btn-default glyphicon glyphicon-edit btnEdit" data-value="@item.id_inventario" style="color:black; padding:0px 5px 0px 5px;" title="Editar Estilo"></a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div id="loading" class="load">
<div id="spinner" class="imagen_loading" style=""></div>
</div>
我的局部视图大部分是相同的，表和编辑。
我将不胜感激。
答案 0 :(得分：0)
在检查Bootstrap（3和4）文档中的模态时，它们的默认z-index看起来像是1050。您是否尝试将loading div的z-index增大到大于1050？
答案 1 :(得分：0)
尝试将这种样式设置为您的加载div：
#loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url(img/preloader.gif) center no-repeat #fff;
}
请注意，加载<div>必须超出模态<div>。
HTML
<div id="loading"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>
答案 2 :(得分：0)
这里的技巧是data-backdrop =“ false” style =“ background-color：rgba（0，0，0，0.5）;”通过删除默认背景，并通过使用一些alpha设置对话框本身的背景颜色来创建虚拟背景。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
注意：单击背景不会按预期关闭对话框。 解决方案：为此，您必须添加一些javascript代码。这是一些如何完成此操作的示例。
$('.modal').click(function(event){
$(event.target).modal('hide');
});
HTML：将其放在您的身体标签中
<div id="LoaderWindow">
<div id="Loader"></div>
</div>
/ *用于加载的CSS * /
.loader-window {
width: 100%;
height: 100%;
position: fixed;
z-index: 1051;
background: rgba(54, 70, 93, 0.95);
}
.loader {
position: absolute;
top:50%;
left:50%;
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #5BFEC8;
width: 60px;
height: 60px;
margin-top:-30px;
margin-left:-30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
您必须使用jquery来添加类。
function loader(
operation
) {
if (operation == 'add') {
$('#LoaderWindow').addClass('loader-window');
$('#Loader').addClass('loader');
} else {
$('#LoaderWindow').removeClass('loader-window');
$('#Loader').removeClass('loader');
}
}
loader（'add'）将在您请求数据时使用，并在收到响应后使用loader（'remove'）;