.
Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Nueva sección de JUEGOS en pruebas. Próximamente campeonatos con premios. Más información AQUÍ
Hosting Gratis (P2H) y de pago, más información AQUÍ o AQUÍ    (Ver PLANES).
Solicitar Hosting de Pruebas AQUÍ .
Para que se habrán los enlaces de descarga pulsar el  Botón Gracias.

Actualización Modal con nuevo diseño



04-22-2022, 01:20 AM #1
2
Mejor respuesta del mensaje Modal con nuevo diseñoHola a todos esto lo pueden aplicar si lo desean, es una modificación completa del 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 
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
/* 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
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 
mydialog.show(true);

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

Eso sería todo!

(Última modificación: 04-22-2022, 01:24 AM por Miguel92. Razón: Arreglos )
 Responder
04-22-2022, 06:58 AM #2
0
Gracias

 Responder



Compartir en:

Salto de foro:



Usuarios navegando en este tema:
1 invitado(s)