Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/09/2011, 12:47
Avatar de angel2010
angel2010
 
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 13 años, 9 meses
Puntos: 2
alerta personalizado pero no funciona return confirm

hola a todos tengo un problema ya pude decorar la ventana de alerta javascript
pero no se como colocar estylo a la ventana de confirm
voy a colocar el codigo para ver si me pueden ayudar

codigo javascript
Código Javascript:
Ver original
  1. // constants to define the title of the alert and button text.
  2. var ALERT_TITLE = "cecilio acosta";
  3. var ALERT_BUTTON_TEXT = "Ok";
  4.  
  5. // over-ride the alert method only if this a newer browser.
  6. // Older browser will see standard alerts
  7. if(document.getElementById) {
  8.     window.alert = function(txt) {
  9.         createCustomAlert(txt);
  10.     }  
  11. }
  12.  
  13. function createCustomAlert(txt) {
  14.     // shortcut reference to the document object
  15.     d = document;
  16.  
  17.     // if the modalContainer object already exists in the DOM, bail out.
  18.     if(d.getElementById("modalContainer")) return;
  19.  
  20.     // create the modalContainer div as a child of the BODY element
  21.     mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
  22.     mObj.id = "modalContainer";
  23.      // make sure its as tall as it needs to be to overlay all the content on the page
  24.     mObj.style.height = document.documentElement.scrollHeight + "px";
  25.  
  26.     // create the DIV that will be the alert
  27.     alertObj = mObj.appendChild(d.createElement("div"));
  28.     alertObj.id = "alertBox";
  29.     // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
  30.     if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
  31.     // center the alert box
  32.     alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
  33.  
  34.     // create an H1 element as the title bar
  35.     h1 = alertObj.appendChild(d.createElement("h1"));
  36.     h1.appendChild(d.createTextNode(ALERT_TITLE));
  37.  
  38.     // create a paragraph element to contain the txt argument
  39.     msg = alertObj.appendChild(d.createElement("p"));
  40.     msg.innerHTML = txt;
  41.    
  42.     // create an anchor element to use as the confirmation button.
  43.     btn = alertObj.appendChild(d.createElement("a"));
  44.     btn.id = "closeBtn";
  45.     btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
  46.     btn.href = "#";
  47.     // set up the onclick event to remove the alert when the anchor is clicked
  48.     btn.onclick = function() { removeCustomAlert();return false; }
  49.  
  50.    
  51. }
  52.  
  53. // removes the custom alert from the DOM
  54. function removeCustomAlert() {
  55.     document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
  56. }

estylo de la ventana alerta
Código CSS:
Ver original
  1. #modalContainer {
  2.     background-color:transparent;
  3.     position:absolute;
  4.     width:100%;
  5.     height:100%;
  6.     top:0px;
  7.     left:0px;
  8.     z-index:10000;
  9.     background-image:url(fond.png); /* required by MSIE to prevent actions on lower z-index elements */
  10. }
  11.  
  12. #alertBox {
  13.     position:relative;
  14.     width:300px;
  15.     min-height:100px;
  16.     margin-top:50px;
  17.     border:2px solid #000;
  18.     background-color:#F2F5F6;
  19.     background-image:url(alerta.png);
  20.     background-repeat:no-repeat;
  21.     background-position:20px 30px;
  22. }
  23.  
  24. #modalContainer > #alertBox {
  25.     position:fixed;
  26. }
  27.  
  28. /*fondo titulo*/
  29. #alertBox h1 {
  30.     margin:0;
  31.     font:bold 0.9em verdana,arial;
  32.     background-color:#009900;
  33.     color:#FFF;
  34.     border-bottom:1px solid #00CC00;
  35.     padding:2px 0 2px 5px;
  36. }
  37.  
  38. /*fondo titulo*/
  39. #alertBox p {
  40.     font:0.7em verdana,arial;
  41.     height:50px;
  42.     padding-left:5px;
  43.     margin-left:55px;
  44. }
  45.  
  46. /*booton*/
  47. #alertBox #closeBtn {
  48.     display:block;
  49.     position:relative;
  50.     margin:5px auto;
  51.     padding:3px;
  52.     border:1px solid #CCCCCC;
  53.     width:70px;
  54.     font:0.7em verdana,arial;
  55.     text-transform:uppercase;
  56.     text-align:center;
  57.     color:#FFF;
  58.     background-color:#00CCFF;
  59.     text-decoration:none;
  60. }

funciones del alerta
<input type = "button" value = "Prueba de la alerta" onclick = "alert ('. Se trata de un diálogo personalizado de alerta que fue creado por un exceso de montar el método window.alert'); "/>

quiero que funcione para onClick="return confirm