Saltar al contenido

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


click open div

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{

}

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/