FUNCION MENSAJE COMPLETA
Para activar los mensajes en el script hay que incluir la funcion center y todo el bloque de la
funcion mensaje que incluye:
- El timer.
- La funcuón mensaje propiamente dicha.
- El bloque $("body").on con los 3 'listeners'
<head>
<script src="../scripts/jquery-3.6.4.min.js"> </script>
<script>
$(document).ready(function(){
//Inicio definición de funciones***************************************
//centrador
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
//fin centrador
// funcion mensaje: copiar todo el bloque hasta fin función mensaje
var timer1; // timer1 global para que valga fuera de la función
function mensaje(texto,fondo="#dddddd",tiempo=3000) { // fondo color css válido por defecto gris desaparece en 3seg
// recomendado: para error 'coral' para éxito 'limegreen'
var estilo = "style= background-color:" + fondo +";font-size:0.80rem;";
estilo += "opacity:1;text-align:center;z-index:102;position:absolute;"; //obligatorios
estilo += "min-width:100px;max-width:200px;min-height:25px;padding:20px;"; //parametrizo el estilo
estilo += "color:black;border-radius:20px;" // idem
clearTimeout(timer1); //paro el timer por si hay otro mensaje
$("#mensaje01").remove(); // elimino la div por si hay otro mensaje
var nuevo = "<div id='mensaje01' " + estilo + "> " + texto + "</div> "; //creo la div mensaje01
$("body").append(nuevo); // la meto en el body
$("#mensaje01").css('cursor', 'pointer'); // manito
$("#mensaje01").center(); // la centro
timer1 = setTimeout(function () {
$("#mensaje01").fadeOut( 2000, function() { //desvanezco en 2 seg
$("#mensaje01").remove(); // elimino la div mensaje01
});
}, tiempo); // delay
return "true"; // agregar la función siguiente
}
$("body").on("mouseenter", '#mensaje01', function(){ // al entrar en el mensaje
clearTimeout(timer1); // detengo timer1
}).on("mouseleave", '#mensaje01', function(){ // al salir del mensaje
$("#mensaje01").fadeOut( 1000, function() { //desvanezco en 1 seg
$("#mensaje01").remove(); // y elimino la div mensaje01
});
}).on("dblclick", '#mensaje01', function(){ // al dblclicar en el mensaje
clearTimeout(timer1); // detengo timer1
$("#mensaje01").remove(); // y elimino la div mensaje01
});
//fin función mensaje
//Fin definición de funciones*******************************************
$("#exito").click(function(evento){
mensaje($("#textoexito").val(),'limegreen',1000);
});
$("#error").click(function(evento){
mensaje($("#textoexito").val(),'coral',1000);
});
});
</script>
<style>
.recuadro{
margin: 0 auto;
width:60%;
padding-top:10px;
padding-bottom:10px;
border:#999 solid 1px;
margin-bottom:20px;
}
input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="cenefa" style="border:none;"> <!-- inicio cenefa -->
<div style="float:left; margin-left:40px;">
<img src="../imagenes/logo_cenefa.png" width="139" height="75" alt="Iqsystems-home">
</div>
</div> <!-- fin cenefa -->
<div class="cierre"> < /div>
<div style="margin: 0 auto; margin-left:20px; margin-top:50px; text-align:center; ">
<div class="textonormal" style="margin-bottom:20px;">
FUNCION MENSAJE COMPLETO
</div>
<div style="padding-top:20px;"> <!-- contenedor-->
<div class="recuadro">
<input name="exito" type="button" value="disparar mensaje de éxito" id="exito" />
<input type="text" id="textoexito" size=20 placeholder="escriba el mensaje"/>
</div>
<div class="recuadro">
<input name="error" type="button" value="disparar mensaje de éxito" id="error" />
<input type="text" id="textoerror" size=20 placeholder="escriba el mensaje"/>
</div>
</div>
</div>
</body>