Jquery Open Div Process

loading

Luego de realizar un evento de click a un botón que tenga un id=”opendiv” se debe de abrir un div que ocupe toda la pantalla en el cual en la parte central contenga un texto procesando y un gif de loading. Adicionalmente este div debe de tener una opacidad.

Imagen de loading:

loading_load

 

 

Veamos la codificación:

HTML

<div class="cartprocess" style="display: none;" >
    <div class="inbox">
        <div class="a">Procesando ...</div>
        <div class="b"><img src="http://blog.juliopari.com/wp-content/uploads/2013/07/loading_load.gif"></div>             
    </div>
</div>


<a id="opendiv">
       click open div
</a>

JQUERY

$("body").on("click", "#opendiv", function(e){     
    $(".cartprocess").fadeTo(30, 0.40, function(){ });
    return false;
});

CSS

.cartprocess{
    background: #000;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 99999;
}

.cartprocess .inbox{
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -64px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
}

.cartprocess .inbox .a{
    margin-bottom: 15px;
}
.cartprocess .inbox .b{

}
post-author