SCR37Crear cuadros de diálogo personalizados de forma independiente del dispositivo

Un botón de opciones que abre un cuadro de diálogo

El HTML de este ejemplo incluye un elemento activador, en este caso un botón, y un div que actúa como marco del cuadro de diálogo.

El elemento activador es un botón y el script se lanza desde el evento onclick. Esto envía los eventos adecuados al sistema operativo para que las tecnologías de asistencia sean conscientes del cambio en el DOM.

En este ejemplo, los botones de envío (Submit) y de restablecimiento (Reset) del interior del cuadro de diálogo se limitan a ocultar el div.

...
<button onclick="TogglePopup(event,true)"
  name="pop0001">Options</button>
<div class="popover" id="pop0001">
  <h3>Edit Sort Information</h3>
  <form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
    <fieldset>
      <legend>Sort Order</legend> 
      <input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
      <input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
    </fieldset>
<div class="buttons">
  <input type="submit" value="OK" />
  <input type="reset" value="Cancel" />
</div>
</form>
</div>
...

El div, el encabezado y los elementos form se estilizan con CSS para que parezcan un cuadro de diálogo.

...
a { color:blue; }
a.clickPopup img { border:none; width:0; }
div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...

El script alterna la visualización del div emergente, mostrándolo y ocultándolo.

...
function TogglePopup(evt,show) {
  HarmonizeEvent(evt);
  var src = evt.target;
  if ("click" == evt.type) {
    evt.returnValue = false;
  }
  var popID = src.getAttribute("name");
  if (popID) {
    var popup = document.getElementById(popID);
    if (popup) {
      if (true == show) {
        popup.style.display = "block";
      }
      else if (false == show) {
        popup.style.display = "none";
      }
      else {
        popup.style.display = "block" == popup.style.display ? "none" : "block";
      }
      if ("block" == popup.style.display) {
        //window.alert(document.documentElement.scrollHeight);
        popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
        popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
      }
    }
  }
}
function SubmitForm(elem) {
  elem.parentNode.style.display='none'; 
  return false;
}
function ResetForm(elem) {
  elem.parentNode.style.display='none'; 
  return false;
}
...