Загрузка div перед начальной загрузкой модальной - PullRequest
Новая
       39

Загрузка div перед начальной загрузкой модальной

0 голосов
/ 16 октября 2018

Я использую загрузчик и модалы для частичных представлений, у меня есть «загрузочный» div, чтобы поставить все перед собой при получении данных.Я не могу поместить загрузочный 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">&times;</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">&times;</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">&times;</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>

Мои частичные представления в основном те же, таблицы и правки.

Буду признателен за любую помощь,

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Попробуйте установить этот стиль в свой загрузочный 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>
0 голосов
/ 15 мая 2019

Хитрость здесь в следующем: data-background = "false" style = "background-color: rgba (0, 0, 0, 0.5);"удалив задний фон по умолчанию и создайте фиктивный фон, установив цвет фона самого диалога с некоторой альфа-версией. 

<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">&times;</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') будет использоваться при запросе данных и после получения ответа использовать загрузчик ('remove');

0 голосов
/ 16 октября 2018

При проверке модалов в документации Bootstrap (3 и 4) похоже, что их z-index по умолчанию равен 1050. Вы пытались увеличить z-index вашего загрузочного div до чего-то большего, чем 1050?

...