Modal con nuevo diseño

[Miguel92 525]

Hola 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"

 

Modal alerta

 

Modal reintentar y error

 

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!