2
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"
[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: ( Seleccionar Todo )
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: ( Seleccionar Todo )
/* 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()">×</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: ( Seleccionar Todo )
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: ( Seleccionar Todo )
mydialog.show(true);y arriba agregan
Código: ( Seleccionar Todo )
mydialog.options = {
size: 'tipo del modal' // Tipos: small o large
} Eso sería todo!
Facebook
Twitter
Reddit
Digg
del.icio.us
Tumblr
Pinterest
Blogger
Fark
LinkedIn
Mix
Google