title: Loading div in front of bootstrap modal
body: <p>I'm using bootstrap and modals for partial views, I have a "loading" div to put in front of everything while getting the data. I can't put the loading div in front of the modal, already tried with z-index but still nothing.</p>
  
  <p>This is my css:</p>
  
  <pre><code>.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')
  }
  </code></pre>
  
  <p>And this is my modal:</p>
  
  <pre><code> &lt;div class="modal fade" id="modal_aprobar_transferencia" data-target="#modal_aprobar_transferencia"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content" style="overflow:auto; width:90% !important; height:90% !important;"&gt;
                  &lt;div class="modal-header orange"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;strong&gt;&lt;/strong&gt;Transfers&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
  
                      @{
                          Html.RenderAction("lista_transferencias", "Almacen");
                      }
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Edit:</p>
  
  <pre><code>&lt;div class="container-fluid" style="padding-left:7em; padding-right:3em;"&gt;
  &lt;h3&gt;Storehouse&lt;/h3&gt;
  
  &lt;div class="row barra_menu" style=" "&gt;
      &lt;div class="" style="float:left;"&gt;
          &lt;button type="button" class="btn btn-lg  btn-info" href="#modal_formulario_altas" data-toggle="modal"&gt;
              Receives
          &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="dropdown"&gt;
          &lt;button type="button" class="btn btn-lg  btn-info dropdown-toggle" data-toggle="dropdown" style="float:left;"&gt;
              Transfers &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;
                  &lt;a href="#modal_formulario_transferencias" data-toggle="modal"&gt;New transfer&lt;/a&gt;
                  &lt;a href="#modal_nuevos_sellos" data-toggle="modal"&gt;New seal package&lt;/a&gt;
                  &lt;a href="#modal_aprobar_transferencia" data-toggle="modal"&gt;See transfers&lt;/a&gt;
                  &lt;a href="#modal_recibir_transferencias" data-toggle="modal" class="btn_recibir_transferencia"&gt;Receive transfers&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="modal fade" id="modal_nuevos_sellos" data-target="#modal_nuevos_sellos"&gt;
          &lt;div class="modal-dialog" style="width:30% !important; height:15% !important;"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header orange"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;strong&gt;&lt;/strong&gt;Add seal package&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="form-group col-3"&gt;
                              &lt;label for="caja_inicio"&gt;First seal &lt;/label&gt;
                              &lt;input type="text" class="form-control numeric must " onkeydown="upperCaseF(this)" id="caja_inicio"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group col-3"&gt;
                              &lt;label for="caja_final"&gt;Last seal&lt;/label&gt;
                              &lt;input type="text" class="form-control numeric  must " onkeydown="upperCaseF(this)" id="caja_final"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group col-3"&gt;
                              &lt;label for="caja_sucursal"&gt;Branch office &lt;/label&gt;
                              &lt;select type="text" class="form-control" id="caja_sucursal"&gt;
                                  &lt;option&gt;Select&lt;/option&gt;
                                  &lt;option value="1"&gt;Fortune&lt;/option&gt;
                                  &lt;option value="2"&gt;Lucky one&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group col-3"&gt;
                              &lt;br /&gt;
                              &lt;button type="button" class="btn btn-primary mb-2" id="boton_guardar_sello" onclick="guardar_sellos_index(event);"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;div class="modal fade" id="modal_aprobar_transferencia" data-target="#modal_aprobar_transferencia"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content" style="overflow:auto; width:90% !important; height:90% !important;"&gt;
                  &lt;div class="modal-header orange"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;strong&gt;&lt;/strong&gt;Approval of transfers&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
  
                      @{
                          Html.RenderAction("lista_transferencias", "Almacen");
                      }
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;!----LISTADO DE INVENTARIO-----&gt;
  &lt;div class="panel panel-default panel-primary"&gt;
      &lt;div class="panel-heading"&gt;&lt;h4&gt;Inventory&lt;/h4&gt;&lt;/div&gt;
      &lt;div style="padding:1em; overflow:auto; "&gt;
          &lt;table id="tabla_inventario" class="table table-striped "&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.id_inventario)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.sucursal)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.po)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.mill_po)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.total)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.categoria_inventario)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.descripcion)&lt;/th&gt;
                      &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.estado)&lt;/th&gt;
  
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach (var item in Model)
                  {
                      &lt;tr&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.id_inventario)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.sucursal)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.po)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.mill_po)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.total)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.categoria_inventario)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.descripcion)&lt;/td&gt;
                          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.estado)&lt;/td&gt;
                          &lt;td&gt;
                              &lt;button type="button" onclick="ver_item(@item.id_inventario)" class="btn btn-default glyphicon glyphicon-search " style="color:black; padding:0px 5px 0px 5px;"&gt;&lt;/button&gt;
                              &lt;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"&gt;&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  }
              &lt;/tbody&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  
  &lt;div id="loading" class="load"&gt;
      &lt;div id="spinner" class="imagen_loading" style=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My partial views are mostly the same, tables and edits.</p>
  
  <p>I'd appreciate any help. </p>