--- obsoleteMessage: | See H102: Creating modal dialogs with the HTML dialog element for a standards-based approach instead. obsoleteSince: 20 ---

# Creating Custom Dialogs in a Device Independent Way

ID: SCR37

Technology: client-side-script

Type: Technique

## When to Use

HTML and XHTML used with script.

## Description

Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a `div` and placing the `div` above the page content using z-order and absolute positioning in CSS.

To be accessible, these dialogs must follow a few simple rules.

1. Trigger the script that launches the dialog from the onclick event of a link or button.
2. Place the dialog `div` into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script.
3. Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.

It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.

## Examples

### An options button that opens a dialog

The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog.

The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM.

In this example, the Submit and Reset buttons inside the dialog simply hide the `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>
    ...

The `div`, heading and `form` elements are styled with CSS to look like a dialog.

    ...
    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; }
    ...

The script toggles the display of the popup `div`, showing it and hiding it.

    ...
    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;
    }
    ...

## Tests

### Procedure

1. Find all areas of the page that trigger dialogs that are not pop-up windows.
2. Check that the dialogs can be opened by tabbing to the area and hitting enter.
3. Check that, once opened, the dialog is next in the tab order.
4. Check that the dialogs are triggered from the click event of a button or a link.
5. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.

### Expected Results

- Checks #2, #3, #4 and #5 are true.

## Related Techniques

- SCR26
- G59

## Resources

- ARIA Authoring Practices Guide - Dialog (Modal).
- HTML - the `dialog` element.