another focus button on modal open and prevent default on anchors loop

by ian_smithz

HTML

<p><a onclick="toggleDialog('show');" href="#" >Display a dialog</a></p>

<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden">
	<h3 id="myDialog">Just an example.</h3>
	<button onclick="toggleDialog('hide');" class="close-button">OK</button>
	<button onclick="toggleDialog('hide');" class="close-button">Cancel</button>		
</div>

CSS

.box-hidden {
    display: none;
    position: absolute;
    top: 19em;
    left: 15em;
    width: 20em;
    height: 5em;
    border: 2px solid black;
    padding: 0 1em 1em 1em;
    background-color: #eee;
    z-index: 1002;
    overflow: auto;
}

JavaScript

var dialogOpen;
var lastFocus;

window.onload = function(){
dialogOpen = false;
}

var links = document.getElementsByTagName('a');
var link;
for(var i = 0, j = links.length; i < j; i++) {
    link = links[i];
    if(link.href.substring(0, 1) == '#') {
       link.onclick = function(e) {
          var ev = e || event;
          ev.preventDefault();
       };
    }
}

function toggleDialog(sh) {
	dialog = document.getElementById("box");
	if (sh == "show") {
		lastFocus = document.activeElement;
		dialogOpen = true;
		dialog.style.display = 'block';
		dialog.tabIndex = -1;
		dialog.focus();
	}
	else {
		dialogOpen = false;
		dialog.style.display = 'none';
		lastFocus.focus();
	}
}

document.addEventListener("focus", function(event) {

    var d = document.getElementById("box");

    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }

}, true);


document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);