Modal, autoguardar 30s

lightbox que muestra aviso con autoguardado de 30s

by fenve

HTML

<button id="callConfirm">paso 120s!</button>

<div id="dialog" title="Aviso">
    El sistema guardará los cambios automaticamente ¿necesita más tiempo? <div id='reloj'></div>
</div>

JavaScript

var futuro = 31;
var timeoutId;
$("#dialog").dialog({
   autoOpen: false,
   modal: true,
   close:function( event, ui ) {clearTimeout(timeoutId);},
   buttons : {
        "Mas tiempo" : function() {
            alert("mas tiempo!");  
            $(this).dialog("close");
        },
        "Autoguardar" : function() {
          guardar();
        }
      }
    });

$("#callConfirm").on("click", function(e) {
    e.preventDefault();
    faltan(futuro);
    $("#dialog").dialog("open");

});


function faltan(futuro) {
    futuro = futuro - 1;
    if (futuro > -1) {
       $("#reloj").html(futuro+"s");
       //setTimeout("faltan("+futuro+")", 1000);
      timeoutId = setTimeout(function() {faltan(futuro)}, 1000);
    }
    else {
       guardar();
    }
}

function guardar(){
    alert('Autoguardar');
    $("#dialog").dialog("close");
}