Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema al mostrar showDialog

 Estas en el tema de Problema al mostrar showDialog en el foro de Javascript en Foros del Web. Buenas foro Estoy tratando de mostrar unos mensajes de error, pero solo me muestra un div que se sobrepone en la pagina pero no aparece ...
  #1 (permalink)  
Antiguo 26/03/2013, 12:56
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 12 años, 4 meses
Puntos: 12
Pregunta Problema al mostrar showDialog
Buenas foro

Estoy tratando de mostrar unos mensajes de error, pero solo me muestra un div que se sobrepone en la pagina pero no aparece la ventana del mensaje de error.

Espero me puedan apoyar.

Código Javascript: 
Ver original
  1. // global variables //
  2. var TIMER = 5;
  3. var SPEED = 10;
  4. var WRAPPER = 'content';
  5.  
  6. // calculate the current window width //
  7. function pageWidth() {
  8.   return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
  9. }
  10.  
  11. // calculate the current window height //
  12. function pageHeight() {
  13.   return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
  14. }
  15.  
  16. // calculate the current window vertical offset //
  17. function topPosition() {
  18.   return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
  19. }
  20.  
  21. // calculate the position starting at the left of the window //
  22. function leftPosition() {
  23.   return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
  24. }
  25.  
  26. // build/show the dialog box, populate the data and call the fadeDialog function //
  27. function showDialog(title,message,type,autohide) {
  28.   if(!type) {
  29.     type = 'error';
  30.   }
  31.   var dialog;
  32.   var dialogheader;
  33.   var dialogclose;
  34.   var dialogtitle;
  35.   var dialogcontent;
  36.   var dialogmask;
  37.   if(!document.getElementById('dialog')) {
  38.     dialog = document.createElement('div');
  39.     dialog.id = 'dialog';
  40.     dialogheader = document.createElement('div');
  41.     dialogheader.id = 'dialog-header';
  42.     dialogtitle = document.createElement('div');
  43.     dialogtitle.id = 'dialog-title';
  44.     dialogclose = document.createElement('div');
  45.     dialogclose.id = 'dialog-close'
  46.     dialogcontent = document.createElement('div');
  47.     dialogcontent.id = 'dialog-content';
  48.     dialogmask = document.createElement('div');
  49.     dialogmask.id = 'dialog-mask';
  50.     document.body.appendChild(dialogmask);
  51.     document.body.appendChild(dialog);
  52.     dialog.appendChild(dialogheader);
  53.     dialogheader.appendChild(dialogtitle);
  54.     dialogheader.appendChild(dialogclose);
  55.     dialog.appendChild(dialogcontent);;
  56.     dialogclose.setAttribute('onclick','hideDialog()');
  57.     dialogclose.onclick = hideDialog;
  58.   } else {
  59.     dialog = document.getElementById('dialog');
  60.     dialogheader = document.getElementById('dialog-header');
  61.     dialogtitle = document.getElementById('dialog-title');
  62.     dialogclose = document.getElementById('dialog-close');
  63.     dialogcontent = document.getElementById('dialog-content');
  64.     dialogmask = document.getElementById('dialog-mask');
  65.     dialogmask.style.visibility = "visible";
  66.     dialog.style.visibility = "visible";
  67.   }
  68.   dialog.style.opacity = .00;
  69.   dialog.style.filter = 'alpha(opacity=0)';
  70.   dialog.alpha = 0;
  71.   var width = pageWidth();
  72.   var height = pageHeight();
  73.   var left = leftPosition();
  74.   var top = topPosition();
  75.   var dialogwidth = dialog.offsetWidth;
  76.   var dialogheight = dialog.offsetHeight;
  77.   var topposition = top + (height / 3) - (dialogheight / 2);
  78.   var leftposition = left + (width / 2) - (dialogwidth / 2);
  79.   dialog.style.top = topposition + "px";
  80.   dialog.style.left = leftposition + "px";
  81.   dialogheader.className = type + "header";
  82.   dialogtitle.innerHTML = title;
  83.   dialogcontent.className = type;
  84.   dialogcontent.innerHTML = message;
  85.   var content = document.getElementById(WRAPPER);
  86.   dialogmask.style.height = content.offsetHeight + 'px';
  87.   dialog.timer = setInterval("fadeDialog(1)", TIMER);
  88.   if(autohide) {
  89.     dialogclose.style.visibility = "hidden";
  90.     window.setTimeout("hideDialog()", (autohide * 1000));
  91.   } else {
  92.     dialogclose.style.visibility = "visible";
  93.   }
  94. }
  95.  
  96. // hide the dialog box //
  97. function hideDialog() {
  98.   var dialog = document.getElementById('dialog');
  99.   clearInterval(dialog.timer);
  100.   dialog.timer = setInterval("fadeDialog(0)", TIMER);
  101. }
  102.  
  103. // fade-in the dialog box //
  104. function fadeDialog(flag) {
  105.   if(flag == null) {
  106.     flag = 1;
  107.   }
  108.   var dialog = document.getElementById('dialog');
  109.   var value;
  110.   if(flag == 1) {
  111.     value = dialog.alpha + SPEED;
  112.   } else {
  113.     value = dialog.alpha - SPEED;
  114.   }
  115.   dialog.alpha = value;
  116.   dialog.style.opacity = (value / 100);
  117.   dialog.style.filter = 'alpha(opacity=' + value + ')';
  118.   if(value >= 99) {
  119.     clearInterval(dialog.timer);
  120.     dialog.timer = null;
  121.   } else if(value <= 1) {
  122.     dialog.style.visibility = "hidden";
  123.     document.getElementById('dialog-mask').style.visibility = "hidden";
  124.     clearInterval(dialog.timer);
  125.   }
  126. }

css:
Código CSS: 
Ver original
  1. #dialog {position:absolute; width:425px; padding:10px; z-index:200; background:#fff}
  2. #dialog-header {display:block; position:relative; width:411px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
  3. #dialog-title {float:left}
  4. #dialog-close {float:right; cursor:pointer; margin:3px 3px 0 0; height:11px; width:11px; background:url(../imagenes/dialog_close.gif) no-repeat}
  5. #dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:13px}
  6. #dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.75; filter:alpha(opacity=75); z-index:100}
  7. .error {background:#fff url(../imagenes/error_bg.jpg) bottom right no-repeat; border:1px solid #924949; border-top:none}
  8. .errorheader {background:url(../imagenes/error_header.gif) repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
  9. .warning {background:#fff url(../imagenes/warning_bg.jpg) bottom right no-repeat; border:1px solid #c5a524; border-top:none}
  10. .warningheader {background:url(../imagenes/warning_header.gif) repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
  11. .success {background:#fff url(../imagenes/success_bg.jpg) bottom right no-repeat; border:1px solid #60a174; border-top:none}
  12. .successheader {background:url(../imagenes/success_header.gif) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
  13. .prompt {background:#fff url(../imagenes/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
  14. .promptheader {background:url(../imagenes/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}

Código HTML: 
Ver original
  1. <link rel="stylesheet" type="text/css" href="../css/dialog_box.css" />
  2. <script type="text/javascript" src="../js/dialog_box.js"></script>
  3.  
  4. <a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> |
__________________
Lo imposible solo cuesta un poco mas
  #2 (permalink)  
Antiguo 26/03/2013, 12:59
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 12 años, 4 meses
Puntos: 12
Respuesta: Problema al mostrar showDialog
Ya solucione el problema.

Me hacia falta agregar un id para el contenido.
__________________
Lo imposible solo cuesta un poco mas

Etiquetas: html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:21.