Bloquear la pantalla mientras se ejecutan peticiones ajax con javascript

El plugin de jQuery BlockUI le permite simular el comportamiento síncrono utilizando AJAX, sin bloquear el navegador [1]. Cuando se activa, se evitará la actividad del usuario con la página (o parte de la página) hasta que se desactive. BlockUI agrega elementos a la DOM para darle a la vez la apariencia y el comportamiento de bloqueo e interacción con el usuario.

Enlaces patrocinados:



Comentarios

Fabian:
2015-12-09 20:12:32

Si se bloquea la pantalla, pero la imagen y el efecto de obcuro no sale si no hasta que termina la petición que puedo hacer el código es el siguiente:
function insert(){
$(document).ready(function() {
admin.insert({
callback : function(data) {
close();
},
scope : this,
async : false
});
});


}

function init() {

$('#charge_page').ready(function() {
$.blockUI({ message: "<img src='../mapaOp4/images/loading2.gif'>" });
insert();
});

}



function close(){
$(document).ready(function() {
$.unblockUI({
onUnblock: function(){
}
});
});
}

el boton que tengo manda a jalar la fucnión init()

que tiene que me falta queme sobra ??

dasdasd:
2016-07-25 22:07:54

asdasdasd

Eduardo mesa:
2016-12-07 20:12:55

te faltan las opciones de css para definir los colores del bloqueo

$.blockUI({ message: '<img src="../../../img/maduro.png"><span style="color:#FFFFFF">Calculando Datos</span>' ,
css: { width: '30%', border:'1px solid #FFFFFF',cursor:'wait',backgroundColor:'#000000',align:'center'},
overlayCSS: { backgroundColor: '#000000',opacity:0.8,cursor:'wait'}
});

xxxxx:
2018-08-01 17:08:42

QQQQQQ

ewrw:
2018-10-09 21:10:31

werwer

asda:
2018-10-16 16:10:44

dasdasdd

ssd:
2020-03-13 20:03:25

dfdf

asdasda:
2020-05-20 10:05:46

ahh ahhh ahhhhhhascadcasd

Hebert:
2020-08-10 13:08:31

Si, ejecuta muy bien. PERO no bloquea la pantalla cuando se hace una petición ajax desde un modal Bootstrap. ¿Alguna solución?

Hebert:
2020-08-10 13:08:10

Si, ejecuta muy bien. PERO no bloquea la pantalla cuando se hace una petición ajax desde un modal Bootstrap. ¿Alguna solución?

rty:
2021-05-18 17:05:50

rty

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

jhonydepp dijo:

excelente recurso gracias por compartirlo

monipodio dijo:

Tu pagina es un horror,... o no es compatible con Chrome, no pude ver absolutamente nada, ni código fuente ni demostrativo. ...

candy neyra dijo:

como puedo obtener el codigo para implementar

Ramesh Sampangi dijo:

Really nice post. I liked it. Keep sharing some more posts again quickly! <a href="https://aipatasala.com/courses/DS@HYD/Data-Science-Course-in-Hyderabad">Data ...

teja aswani dijo:

This is a well-written article. I read the material and found it to be extremely beneficial. Thank you for sharing this information. ...

Artificial Intelligence course in Chennai dijo:

I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please ...

AWS Training in Hyderabad dijo:

Excellent pieces. Keep posting such kind of info on your blog. I?m really impressed by your site. <a href="https://www.kellytechno.com/Hyderabad/Course/amazon-web-services-training">AWS ...

www.amazon.com/mytv dijo:

<a href="https://sites.google.com/view/avgcomenusactivation/" rel="dofollow">avg.com/retail</a> <a ...

Brajput123 dijo:

<a href="https://www.amzoncamzon.com/"> Amazon.com mytv </a> - you merely unboxed a fresh ...