{"id":236,"date":"2013-04-28T14:24:30","date_gmt":"2013-04-28T13:24:30","guid":{"rendered":"http:\/\/www.dgcmedia.es\/blog\/?p=236"},"modified":"2013-04-28T14:30:18","modified_gmt":"2013-04-28T13:30:18","slug":"personalizar-los-alert-en-java-script","status":"publish","type":"post","link":"https:\/\/www.dgcmedia.es\/blog\/personalizar-los-alert-en-java-script\/","title":{"rendered":"Personalizar los alert en Java Script"},"content":{"rendered":"

Volvemos con Java Script, para mostraros c\u00f3mo personalizar todos los alerts de una p\u00e1gina web de forma f\u00e1cil.<\/p>\n

function alertDGC(mensaje)\r\n{\r\n\tvar dgcTiempo=500\r\n\tvar ventanaCS='<div class=\"dgcAlert\"><div class=\"dgcVentana\"><div class=\"dgcCerrar\"><\/div><div class=\"dgcMensaje\">'+mensaje+'<br><div class=\"dgcAceptar\">Aceptar<\/div><\/div><\/div><\/div>';\r\n\t$('body').append(ventanaCS);\r\n\tvar alVentana=$('.dgcVentana').height();\r\n\tvar alNav=$(window).height();\r\n\tvar supNav=$(window).scrollTop();\r\n\t$('.dgcAlert').css('height',$(document).height());\r\n\t$('.dgcVentana').css('top',((alNav-alVentana)\/2+supNav-100)+'px');\r\n\t$('.dgcAlert').css('display','block');\r\n\t$('.dgcAlert').animate({opacity:1},dgcTiempo);\r\n\t$('.dgcCerrar,.dgcAceptar').click(function(e) {\r\n\t\t$('.dgcAlert').animate({opacity:0},dgcTiempo);\r\n\t\tsetTimeout(\"$('.dgcAlert').remove()\",dgcTiempo);\r\n\t});\r\n}\r\nwindow.alert = function (message) {\r\n  alertDGC(message);\r\n};<\/pre>\n
Finalmente, se puede personalizar su aspecto con las siguientes l\u00edneas de CSS.<\/p>\n
.dgcAlert {top: 0;position: absolute;width: 100%;display: block;height: 1000px; background: url(http:\/\/www.dgcmedia.es\/recursosExternos\/fondoAlert.png) repeat; text-align:center; opacity:0; display:none; z-index:999999999999999;}\r\n.dgcAlert .dgcVentana{width: 500px; background: white;min-height: 150px;position: relative;margin: 0 auto;color: black;padding: 10px;border-radius: 10px;}\r\n.dgcAlert .dgcVentana .dgcCerrar {height: 25px;width: 25px;float: right; cursor:pointer; background: url(http:\/\/www.dgcmedia.es\/recursosExternos\/cerrarAlert.jpg) no-repeat center center;}\r\n.dgcAlert .dgcVentana .dgcMensaje { margin: 0 auto; padding-top: 45px; text-align: center; width: 400px;font-size: 20px;}\r\n.dgcAlert .dgcVentana .dgcAceptar{background:#09C; bottom:20px; display: inline-block; font-size: 12px; font-weight: bold; height: 24px; line-height: 24px; padding-left: 5px; padding-right: 5px;text-align: center; text-transform: uppercase; width: 75px;cursor: pointer; color:#FFF; margin-top:50px;}<\/pre>\n
Como pod\u00e9is ver, extremadamente f\u00e1cil y r\u00e1pido. Ahora, al utilizar la funci\u00f3n alert(“Hola”) de Java Script, tendr\u00e9is un mensaje personalizado. Pero \u00a1ojo!, este alert no detiene la ejecuci\u00f3n del c\u00f3digo (algo que s\u00ed hace el alert original)<\/p>\n
Pod\u00e9is probarlo rellenando de forma incorrecta el formulario de contacto del sidebar derecho.<\/p>\n","protected":false},"excerpt":{"rendered":"
Volvemos con Java Script, para mostraros c\u00f3mo personalizar todos los alerts de una p\u00e1gina web de forma f\u00e1cil. function alertDGC(mensaje) { var dgcTiempo=500 var ventanaCS='<div class=”dgcAlert”><div class=”dgcVentana”><div class=”dgcCerrar”><\/div><div class=”dgcMensaje”>’+mensaje+'<br><div class=”dgcAceptar”>Aceptar<\/div><\/div><\/div><\/div>’; $(‘body’).append(ventanaCS); var alVentana=$(‘.dgcVentana’).height(); var alNav=$(window).height(); var supNav=$(window).scrollTop(); $(‘.dgcAlert’).css(‘height’,$(document).height()); $(‘.dgcVentana’).css(‘top’,((alNav-alVentana)\/2+supNav-100)+’px’); $(‘.dgcAlert’).css(‘display’,’block’); … Sigue leyendo →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,108],"tags":[113,18,110,114],"_links":{"self":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/236"}],"collection":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":3,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}