<![CDATA[PHPost | Soporte, Descargas y Tutoriales de Risus Nova - Jquery y JS]]> https://phpost.es/ Fri, 26 Jun 2026 21:26:32 +0000 MyBB <![CDATA[Modal con nuevo diseño]]> https://phpost.es/tema-Actualizaci%C3%B3n-Modal-con-nuevo-dise%C3%B1o Fri, 22 Apr 2022 02:20:43 +0200 Miguel92]]> https://phpost.es/tema-Actualizaci%C3%B3n-Modal-con-nuevo-dise%C3%B1o mydialog que trae en tema/js/acciones.js, es bastante "viejo"(por decirlo de alguna forma), lo que hice fue quitar el código que tenía y que no hacía nada, mejore la parte del footer del modal al agregar los botones, ahora se puede entender mejor...
 
Algunas capturas de como va a quedar... (Esto puede llegar a cambiar si es que exista un elemento css que modifique el existente)
 
El modal es sus 3 versiones "Default", "Pequeño" y "Grande"
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Modal alerta
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Modal reintentar y error
[img]Registrate o inicia tu sesión para ver este contenido[/img]
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Bueno, a lo que vinieron jajaja

1 - Buscan en js/acciones.js 
Código:
var mydialog = {
... TODO EL CODIGO ..
}
document.onkeydown = function(e){
   key = (e==null)?event.keyCode:e.which;
   if(key == 27) mydialog.close();
};

y lo reemplazan por
Código:
/* MyDialog 1.0 */
var mydialog = new function() {
   // Opciones por defecto
   this.options = {
      fixed: true,
      size: ''
   },
   this.close_button = true,
   this.mask_close = true,
   this.class_aux = '',
   // Generamos la plantilla
   this.template = `<div id="dialog">
      <div id="title"></div>
      <div id="cuerpo">
         <div id="procesando"><div id="mensaje"></div></div>
         <div id="modalBody"></div>
      </div>
      <div id="buttons"></div>
   </div>`,
   // Iniciamos
   this.show = () => {
      // Agregamos al body
      $("#mydialog").html(this.template);
      // Agregamos clases, si contiene
      if(!empty(this.class_aux) || !empty(this.options.size)) {
          $('#mydialog').addClass(this.class_aux + ' ' + this.options.size)
      }
      // Opciones de la mascara
      $("#mydialog").prepend('<div id="mask"></div>')
      if(this.mask_close) $("#mydialog > #mask").click(() => this.close())
      // Agregamos los extras
      if(this.options.fixed) $("body").attr("modal-open", true)
      $('#mydialog #dialog').fadeIn('fast');
      // Botón cerrar
      if(this.close_button) {
         $('#mydialog #dialog').append('<span class="close_dialog" onclick="mydialog.close()">&times;</span>');
      }
   },
   this.close = () => {
      $('#mydialog #dialog, #mydialog #mask').fadeOut('fast', () => $(this).remove());
      if(this.options.fixed) $("body").removeAttr("modal-open")
      this.procesando_fin();
   },
   this.center = () => {
      var centrado = $("#dialog");
      centrado.css({
         'left': Math.round($(window).width() / 2) - Math.round(centrado.width() / 2),
         'top': Math.round($(window).height() / 2) - Math.round(centrado.height() / 2)
      })
   },
   this.title = string => $("#title").html(string)
   this.body = string => $("#modalBody").html(string),
   this.buttons = (all, display1, val1, action1, enabled1, focus1, display2, val2, action2, enabled2, focus2) => {
      var buttons_add = $("#buttons")
      // Con este mostramos los botones
      if(all === true) {
         // Accion close"
         var close = 'mydialog.close()'
         if(action1 === 'close') action1 = close;
         if(action2 === 'close' || !val2) action2 = close;
         if(!val2) {
            val2 = 'Cancelar';
            enabled2 = true;
         }
         // Mostramos boton 1
         if(display1) buttons_add.append(`<input type="button" class="mBtn btnOk" onclick="${action1}" value="${val1}"` + (enabled1 ? '' : ' disabled') + `>`)
         // Mostramos boton 2
         if(display2) buttons_add.append(`<input type="button" class="mBtn btnCancel" onclick="${action2}" value="${val2}"` + (enabled2 ? '' : ' disabled') + `>`)
         // Enfocamos
         if(focus1) $('#mydialog #buttons .mBtn.btnOk').focus();
         else if(focus2) $('#mydialog #buttons .mBtn.btnCancel').focus();

      } else buttons_add.remove()
   },
   this.alert = (title, body, reload) => {
      this.class_aux = 'modal-alert'
      this.close_button = false
      this.show();
      this.title(title);
      this.body(body);
      this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : ''), true, true, false);
      this.center();
   },
   this.error_500 = fun_reintentar => {
      mydialog.procesando_inicio('Procesando...', 'Reintentando');
      setTimeout(() => {
         mydialog.procesando_fin();
         mydialog.show();
         mydialog.title('Error');
         mydialog.body('Error al intentar procesar lo solicitado');
         mydialog.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
         mydialog.center();
      }, 2000);
   },
   this.procesando_inicio = (value, title) => {
      if(!this.is_show){
         this.show();
         this.title(title);
         this.buttons(false);
         this.center();
      }
      $('#mydialog #procesando #mensaje').html('<img src="'+global_data.img+'images/loading_bar.gif" />');
      $('#mydialog #procesando').fadeIn('fast');
   },
   this.procesando_fin = () => $('#mydialog #procesando').fadeOut('fast')
}
document.onkeydown = function(e){
   key = (e==null)?event.keyCode:e.which;
   if(key == 27) mydialog.close();
}; 


2 - En estilo.css buscan todos los #mask, #mydialog que existan y lo borran, ya que puede interferir con el nuevo estilo... Pero si quieren evitarlo pueden incluirlo directamente en extras.css o phpost.css
Código:
body[modal-open=true] {
    overflow: hidden;
}
#mydialog #mask {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(50, 50, 50, .7);
}
#mydialog #dialog {
    --radius: 0.375rem;
    --shadow: 0 0 .5rem rgba(49, 49, 49, .3);
    --bordermodal: 1px solid rgba(150, 150, 150, .3);
    background-color: var(--base-color-body);
    color: var(--base-color-texto);
    border: var(--bordermodal);
    z-index: 99;
    position: fixed;
    width: 560px;
    box-shadow: var(--shadow);
    border-radius: var(--radius)!important;
}
#mydialog.small #dialog {
    width: 300px;
}
#mydialog.large #dialog {
    width: 700px;
}
#mydialog #dialog .close_dialog {
    --whlh: 1.2rem;
   position: absolute;
   top: 0.76rem;
   right: 0.66rem;
   display: grid;
   width: var(--whlh);
   height: var(--whlh);
   color: white;
   background-color: red;
   place-items: center;
   line-height: 1rem;
   font-size: var(--whlh);
   cursor: pointer;
   border-radius: .32rem;
}
#mydialog #dialog #title {
    display: block;
    padding: 0.82rem 1rem;
    font-weight: 600;
    border-bottom: var(--bordermodal);
    position: relative;
}
#mydialog #dialog #mensaje img {
    position: relative;
    margin: 1rem auto;
    display: block;
}
#mydialog #dialog #modalBody {
    padding: 1rem;
    max-height: 320px;
    overflow-y: auto;
}
#mydialog #dialog #buttons {
    display: flex;
   justify-content: space-around;
   align-items: center;
    padding: .654rem 0;
    border-top: var(--bordermodal);
    width: 100%;
}
#mydialog #dialog #buttons .mBtn {
    padding: .6rem 1.4rem;
}
#mydialog.modal-alert #dialog #title,
#mydialog.modal-alert #dialog #buttons {
    border: none;
    padding: 1rem;
}
#mydialog.modal-alert #dialog #modalBody {
    padding: 0.4rem 1rem;
}
#mydialog.modal-alert #dialog #buttons {
    display: block;
    text-align: right;
} 


Nota:
Para activar el modal "pequeño" o "grande" deben buscar el modal que quieren modificar y buscan 
Código:
mydialog.show(true);

y arriba agregan
Código:
mydialog.options = {
    size: 'tipo del modal' // Tipos: small o large
} 

Eso sería todo!]]> mydialog que trae en tema/js/acciones.js, es bastante "viejo"(por decirlo de alguna forma), lo que hice fue quitar el código que tenía y que no hacía nada, mejore la parte del footer del modal al agregar los botones, ahora se puede entender mejor...
 
Algunas capturas de como va a quedar... (Esto puede llegar a cambiar si es que exista un elemento css que modifique el existente)
 
El modal es sus 3 versiones "Default", "Pequeño" y "Grande"
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Modal alerta
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Modal reintentar y error
[img]Registrate o inicia tu sesión para ver este contenido[/img]
[img]Registrate o inicia tu sesión para ver este contenido[/img]
 
Bueno, a lo que vinieron jajaja

1 - Buscan en js/acciones.js 
Código:
var mydialog = {
... TODO EL CODIGO ..
}
document.onkeydown = function(e){
   key = (e==null)?event.keyCode:e.which;
   if(key == 27) mydialog.close();
};

y lo reemplazan por
Código:
/* MyDialog 1.0 */
var mydialog = new function() {
   // Opciones por defecto
   this.options = {
      fixed: true,
      size: ''
   },
   this.close_button = true,
   this.mask_close = true,
   this.class_aux = '',
   // Generamos la plantilla
   this.template = `<div id="dialog">
      <div id="title"></div>
      <div id="cuerpo">
         <div id="procesando"><div id="mensaje"></div></div>
         <div id="modalBody"></div>
      </div>
      <div id="buttons"></div>
   </div>`,
   // Iniciamos
   this.show = () => {
      // Agregamos al body
      $("#mydialog").html(this.template);
      // Agregamos clases, si contiene
      if(!empty(this.class_aux) || !empty(this.options.size)) {
          $('#mydialog').addClass(this.class_aux + ' ' + this.options.size)
      }
      // Opciones de la mascara
      $("#mydialog").prepend('<div id="mask"></div>')
      if(this.mask_close) $("#mydialog > #mask").click(() => this.close())
      // Agregamos los extras
      if(this.options.fixed) $("body").attr("modal-open", true)
      $('#mydialog #dialog').fadeIn('fast');
      // Botón cerrar
      if(this.close_button) {
         $('#mydialog #dialog').append('<span class="close_dialog" onclick="mydialog.close()">&times;</span>');
      }
   },
   this.close = () => {
      $('#mydialog #dialog, #mydialog #mask').fadeOut('fast', () => $(this).remove());
      if(this.options.fixed) $("body").removeAttr("modal-open")
      this.procesando_fin();
   },
   this.center = () => {
      var centrado = $("#dialog");
      centrado.css({
         'left': Math.round($(window).width() / 2) - Math.round(centrado.width() / 2),
         'top': Math.round($(window).height() / 2) - Math.round(centrado.height() / 2)
      })
   },
   this.title = string => $("#title").html(string)
   this.body = string => $("#modalBody").html(string),
   this.buttons = (all, display1, val1, action1, enabled1, focus1, display2, val2, action2, enabled2, focus2) => {
      var buttons_add = $("#buttons")
      // Con este mostramos los botones
      if(all === true) {
         // Accion close"
         var close = 'mydialog.close()'
         if(action1 === 'close') action1 = close;
         if(action2 === 'close' || !val2) action2 = close;
         if(!val2) {
            val2 = 'Cancelar';
            enabled2 = true;
         }
         // Mostramos boton 1
         if(display1) buttons_add.append(`<input type="button" class="mBtn btnOk" onclick="${action1}" value="${val1}"` + (enabled1 ? '' : ' disabled') + `>`)
         // Mostramos boton 2
         if(display2) buttons_add.append(`<input type="button" class="mBtn btnCancel" onclick="${action2}" value="${val2}"` + (enabled2 ? '' : ' disabled') + `>`)
         // Enfocamos
         if(focus1) $('#mydialog #buttons .mBtn.btnOk').focus();
         else if(focus2) $('#mydialog #buttons .mBtn.btnCancel').focus();

      } else buttons_add.remove()
   },
   this.alert = (title, body, reload) => {
      this.class_aux = 'modal-alert'
      this.close_button = false
      this.show();
      this.title(title);
      this.body(body);
      this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : ''), true, true, false);
      this.center();
   },
   this.error_500 = fun_reintentar => {
      mydialog.procesando_inicio('Procesando...', 'Reintentando');
      setTimeout(() => {
         mydialog.procesando_fin();
         mydialog.show();
         mydialog.title('Error');
         mydialog.body('Error al intentar procesar lo solicitado');
         mydialog.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
         mydialog.center();
      }, 2000);
   },
   this.procesando_inicio = (value, title) => {
      if(!this.is_show){
         this.show();
         this.title(title);
         this.buttons(false);
         this.center();
      }
      $('#mydialog #procesando #mensaje').html('<img src="'+global_data.img+'images/loading_bar.gif" />');
      $('#mydialog #procesando').fadeIn('fast');
   },
   this.procesando_fin = () => $('#mydialog #procesando').fadeOut('fast')
}
document.onkeydown = function(e){
   key = (e==null)?event.keyCode:e.which;
   if(key == 27) mydialog.close();
}; 


2 - En estilo.css buscan todos los #mask, #mydialog que existan y lo borran, ya que puede interferir con el nuevo estilo... Pero si quieren evitarlo pueden incluirlo directamente en extras.css o phpost.css
Código:
body[modal-open=true] {
    overflow: hidden;
}
#mydialog #mask {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(50, 50, 50, .7);
}
#mydialog #dialog {
    --radius: 0.375rem;
    --shadow: 0 0 .5rem rgba(49, 49, 49, .3);
    --bordermodal: 1px solid rgba(150, 150, 150, .3);
    background-color: var(--base-color-body);
    color: var(--base-color-texto);
    border: var(--bordermodal);
    z-index: 99;
    position: fixed;
    width: 560px;
    box-shadow: var(--shadow);
    border-radius: var(--radius)!important;
}
#mydialog.small #dialog {
    width: 300px;
}
#mydialog.large #dialog {
    width: 700px;
}
#mydialog #dialog .close_dialog {
    --whlh: 1.2rem;
   position: absolute;
   top: 0.76rem;
   right: 0.66rem;
   display: grid;
   width: var(--whlh);
   height: var(--whlh);
   color: white;
   background-color: red;
   place-items: center;
   line-height: 1rem;
   font-size: var(--whlh);
   cursor: pointer;
   border-radius: .32rem;
}
#mydialog #dialog #title {
    display: block;
    padding: 0.82rem 1rem;
    font-weight: 600;
    border-bottom: var(--bordermodal);
    position: relative;
}
#mydialog #dialog #mensaje img {
    position: relative;
    margin: 1rem auto;
    display: block;
}
#mydialog #dialog #modalBody {
    padding: 1rem;
    max-height: 320px;
    overflow-y: auto;
}
#mydialog #dialog #buttons {
    display: flex;
   justify-content: space-around;
   align-items: center;
    padding: .654rem 0;
    border-top: var(--bordermodal);
    width: 100%;
}
#mydialog #dialog #buttons .mBtn {
    padding: .6rem 1.4rem;
}
#mydialog.modal-alert #dialog #title,
#mydialog.modal-alert #dialog #buttons {
    border: none;
    padding: 1rem;
}
#mydialog.modal-alert #dialog #modalBody {
    padding: 0.4rem 1rem;
}
#mydialog.modal-alert #dialog #buttons {
    display: block;
    text-align: right;
} 


Nota:
Para activar el modal "pequeño" o "grande" deben buscar el modal que quieren modificar y buscan 
Código:
mydialog.show(true);

y arriba agregan
Código:
mydialog.options = {
    size: 'tipo del modal' // Tipos: small o large
} 

Eso sería todo!]]> <![CDATA[Reduce la función login_ajax()]]> https://phpost.es/tema-Tutorial-Reduce-la-funci%C3%B3n-login-ajax Wed, 16 Feb 2022 14:57:41 +0100 Miguel92]]> https://phpost.es/tema-Tutorial-Reduce-la-funci%C3%B3n-login-ajax
1 - En acciones.js buscamos la función mencionada en el título
 
Código:
function login_ajax(form, connect){
    var el = new Array(), params = '';
    if (form == 'registro-logueo' || form == 'logueo-form') {
        el['nick'] = $('.reg-login .login-panel #nickname');
        el['pass'] = $('.reg-login .login-panel #password');
        el['error'] = $('.reg-login .login-panel #login_error');
        el['cargando'] = $('.reg-login .login-panel #login_cargando');
        el['cuerpo'] = $('.reg-login .login-panel .login_cuerpo');
        el['button'] = $('.reg-login .login-panel input[type="submit"]');
    } else {
        el['nick'] = $('#login_box #nickname');
        el['pass'] = $('#login_box #password');
        el['error'] = $('#login_box #login_error');
        el['cargando'] = $('#login_box #login_cargando');
        el['cuerpo'] = $('#login_box .login_cuerpo');
        el['button'] = $('#login_box input[type="submit"]');
    }
    if (typeof connect != 'undefined') {
        params = 'connect=facebook';
    } else {
        if (empty($(el['nick']).val())) {
            $(el['nick']).focus();
            return;
        }
        if (empty($(el['pass']).val())) {
            $(el['pass']).focus();
            return;
        }
        $(el['error']).css('display', 'none');
        $(el['cargando']).css('display', 'block');
        $(el['button']).attr('disabled', 'disabled').addClass('disabled');
        var remember = ($('#rem').is(':checked')) ? 'true' : 'false';
        params = 'nick='+encodeURIComponent($(el['nick']).val())+'&pass='+encodeURIComponent($(el['pass']).val())+'&rem='+remember;
        if (form == 'logueo-form') {
            params += '&facebook=1';
        }
    }
    $('#loading').fadeIn(250);    
    $.ajax({
        type: 'post', url: global_data.url + '/login-user.php', cache: false, data: params,
        success: function (h) {
            switch(h.charAt(0)){
                case '0':
                    $(el['error']).html(h.substring(3)).show();
                    $(el['nick']).focus();
                    $(el['button']).removeAttr('disabled').removeClass('disabled');
                    break;
                case '1':
                    if (form != 'registro-logueo') {
                        close_login_box();
                    }
                    if (h.substring(3)=='Home') {
                        location.href='/';
                    } else if (h.substr(3) == 'Cuenta') {
                        location.href = '/cuenta/';
                    } else {
                        location.reload();
                    }
                    $('#loading').fadeOut(350);
                    break;
                case '2':
                    $(el['cuerpo']).css('text-align', 'center').css('line-height', '150%').html(h.substring(3));
                    break;
                case '3':
                    open_login_box();
                    mydialog.class_aux = 'registro';
                    mydialog.mask_close = false;
                    mydialog.close_button = true;
                    mydialog.show(true);
                    mydialog.title('Ingresar');
                    mydialog.body('<br /><br />', 305);
                    mydialog.buttons(false);
                    mydialog.procesando_inicio('Cargando...', 'Registro');
                    mydialog.center();
                    $.ajax({
                        type: 'POST',
                        url: global_data.url + '/login-form.php',
                        data: '',
                        success: function(h){
                            mydialog.procesando_fin();
                            switch(h.charAt(0)){
                                case '0':
                                    mydialog.alert('Error', h.substring(3));
                                    break;
                                case '1':
                                    mydialog.body(h.substring(3), 305);
                            }
                            mydialog.center();
                        }
                    });

            }
        },
        error: function() {
            $(el['error']).html(lang['error procesar']).show();
        },
        complete: function(){
            $(el['cargando']).css('display', 'none');
        }
    });
}

y la reemplazaremos por
 
Código:
login_ajax = () => {
    if( empty($("#nickname").val()) ) {
        $("#nickname").focus();return
    }
    if( empty($("#password").val()) ) {
        $("#password").focus();return
    }
    // Datos a enviar
    let dato = [
        'nick=' + encodeURIComponent($("#nickname").val()),
        'pass=' + encodeURIComponent($("#password").val()),
        'rem=' + $("#rem").is(':checked')
    ].join("&");
    // Imagen de cargando
    $(".login_cuerpo").append('<div id="login_cargando"><img src="'+global_data.img+'images/large-loading.gif" width="32" height="32" alt="Iniciando sesion"></div>');
    // Envio los datos
    $.post(global_data.url + "/login-user.php", dato, response => {
        switch (response.charAt(0)) {
            case '0':
                $("#login_error").html(response.substring(3)).show()
                $("#login_cargando").remove()
            break;
            // Iniciamos sesion
            case '1':
                setTimeout(() => (response.charAt(0) != '1' ? location.href = response.substring(3) : location.reload()), 1500)
            break;
        }
    })
    .fail(() => {
        $("#login_error").html('Error al procesar la petici&oacute;n')
        $("#login_cargando").remove()
    })
}

Listo, así de fácil...Puede ser que en el futuro lo mejore más...]]>
1 - En acciones.js buscamos la función mencionada en el título
 
Código:
function login_ajax(form, connect){
    var el = new Array(), params = '';
    if (form == 'registro-logueo' || form == 'logueo-form') {
        el['nick'] = $('.reg-login .login-panel #nickname');
        el['pass'] = $('.reg-login .login-panel #password');
        el['error'] = $('.reg-login .login-panel #login_error');
        el['cargando'] = $('.reg-login .login-panel #login_cargando');
        el['cuerpo'] = $('.reg-login .login-panel .login_cuerpo');
        el['button'] = $('.reg-login .login-panel input[type="submit"]');
    } else {
        el['nick'] = $('#login_box #nickname');
        el['pass'] = $('#login_box #password');
        el['error'] = $('#login_box #login_error');
        el['cargando'] = $('#login_box #login_cargando');
        el['cuerpo'] = $('#login_box .login_cuerpo');
        el['button'] = $('#login_box input[type="submit"]');
    }
    if (typeof connect != 'undefined') {
        params = 'connect=facebook';
    } else {
        if (empty($(el['nick']).val())) {
            $(el['nick']).focus();
            return;
        }
        if (empty($(el['pass']).val())) {
            $(el['pass']).focus();
            return;
        }
        $(el['error']).css('display', 'none');
        $(el['cargando']).css('display', 'block');
        $(el['button']).attr('disabled', 'disabled').addClass('disabled');
        var remember = ($('#rem').is(':checked')) ? 'true' : 'false';
        params = 'nick='+encodeURIComponent($(el['nick']).val())+'&pass='+encodeURIComponent($(el['pass']).val())+'&rem='+remember;
        if (form == 'logueo-form') {
            params += '&facebook=1';
        }
    }
    $('#loading').fadeIn(250);    
    $.ajax({
        type: 'post', url: global_data.url + '/login-user.php', cache: false, data: params,
        success: function (h) {
            switch(h.charAt(0)){
                case '0':
                    $(el['error']).html(h.substring(3)).show();
                    $(el['nick']).focus();
                    $(el['button']).removeAttr('disabled').removeClass('disabled');
                    break;
                case '1':
                    if (form != 'registro-logueo') {
                        close_login_box();
                    }
                    if (h.substring(3)=='Home') {
                        location.href='/';
                    } else if (h.substr(3) == 'Cuenta') {
                        location.href = '/cuenta/';
                    } else {
                        location.reload();
                    }
                    $('#loading').fadeOut(350);
                    break;
                case '2':
                    $(el['cuerpo']).css('text-align', 'center').css('line-height', '150%').html(h.substring(3));
                    break;
                case '3':
                    open_login_box();
                    mydialog.class_aux = 'registro';
                    mydialog.mask_close = false;
                    mydialog.close_button = true;
                    mydialog.show(true);
                    mydialog.title('Ingresar');
                    mydialog.body('<br /><br />', 305);
                    mydialog.buttons(false);
                    mydialog.procesando_inicio('Cargando...', 'Registro');
                    mydialog.center();
                    $.ajax({
                        type: 'POST',
                        url: global_data.url + '/login-form.php',
                        data: '',
                        success: function(h){
                            mydialog.procesando_fin();
                            switch(h.charAt(0)){
                                case '0':
                                    mydialog.alert('Error', h.substring(3));
                                    break;
                                case '1':
                                    mydialog.body(h.substring(3), 305);
                            }
                            mydialog.center();
                        }
                    });

            }
        },
        error: function() {
            $(el['error']).html(lang['error procesar']).show();
        },
        complete: function(){
            $(el['cargando']).css('display', 'none');
        }
    });
}

y la reemplazaremos por
 
Código:
login_ajax = () => {
    if( empty($("#nickname").val()) ) {
        $("#nickname").focus();return
    }
    if( empty($("#password").val()) ) {
        $("#password").focus();return
    }
    // Datos a enviar
    let dato = [
        'nick=' + encodeURIComponent($("#nickname").val()),
        'pass=' + encodeURIComponent($("#password").val()),
        'rem=' + $("#rem").is(':checked')
    ].join("&");
    // Imagen de cargando
    $(".login_cuerpo").append('<div id="login_cargando"><img src="'+global_data.img+'images/large-loading.gif" width="32" height="32" alt="Iniciando sesion"></div>');
    // Envio los datos
    $.post(global_data.url + "/login-user.php", dato, response => {
        switch (response.charAt(0)) {
            case '0':
                $("#login_error").html(response.substring(3)).show()
                $("#login_cargando").remove()
            break;
            // Iniciamos sesion
            case '1':
                setTimeout(() => (response.charAt(0) != '1' ? location.href = response.substring(3) : location.reload()), 1500)
            break;
        }
    })
    .fail(() => {
        $("#login_error").html('Error al procesar la petici&oacute;n')
        $("#login_cargando").remove()
    })
}

Listo, así de fácil...Puede ser que en el futuro lo mejore más...]]>