View source for Dialog Focus: Keep it modal

<html lang="en">
<head>
    <title>Dialog Focus - Keeping focus inside modal dialogs.</title>
<style>
.focus-demo .modal{background-color:#000;padding:10px;}
.focus-demo .modal h2{color:#FF0;}
.focus-demo .modal.closed{display:none;}
.focus-demo .closer{float:right;}
.focus-demo a{display:block;padding:5px;border:3px inset grey;width:100px;background-color:#CCC;text-decoration:none;}
.focus-demo a:focus{outline:2px solid orange;border:3px outset grey;text-decoration:underline;}
</style>
</head>
<body class="focus-demo">
<div class="focus-demo">
    <h1>Dialog Focus - Keeping focus inside modal dialogs.</h1>
    <p>While the dialog is open, focus cannot move out of the dialog.</p>
    <a href="#swag">A control before the dialog</a>
    <a class="modal-launcher" href="javascript:openDialog();">Open the dialog</a>
    <div class="modal closed modal-control" tabindex="-1">
        <a id="0" href="javascript:closeDialog();" class="closer modal-control">Close</a>
        <h2>Try to tab out of the dialog</h2>
        <a id="1" class="modal-control" href="#swag">Control 1</a>
        <a id="2" class="modal-control" href="#swag">Control 2</a>
        <a id="3" class="modal-control" href="#swag">Control 3</a>
        <a id="4" class="modal-control" href="#swag">Control 4</a>
        <a id="5" class="modal-control" href="#swag">Control 5</a>
    </div>
    <a href="#swag">A control after dialog</a>
<script>
    
    var modal = document.getElementsByClassName('modal')[0];
    var controls = modal.getElementsByClassName('modal-control');

    function modalShift(e,f,g){
    //handle focus between modal elements
        //e - current element
        //f - next element
        //g - previous element
        e.onblur = function (event) {//in case user clicks out of dialog
            //important that all modal controls have this class 'modal-control'
            setTimeout(function () {
                if (!document.activeElement.classList.contains('modal-control')) {
                    event.target.focus();
                }
            },10);
        }
        e.onkeydown = function (event){
            if (event.keyCode === 9) {//tab key
                event.preventDefault();
                if (event.shiftKey) {
                    g.focus();//previuos control
                } else {
                    f.focus();//next control
                }
            }
        };
    }
    
    //middle controls
    for (var i=1,j=controls.length-1;i < j; i++){
        modalShift(controls[i], controls[i+1], controls[i-1]);
    }
    //first control
    modalShift(controls[0], controls[1], controls[controls.length-1]);
    //last control
    modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
    
    function closeDialog() {
        modal.className = 'modal closed modal-control';
        document.getElementsByClassName('modal-launcher')[0].focus();
    }
    
    function openDialog() {
        modal.className = 'modal open modal-control';
        modal.setAttribute('tabindex','-1');
        modal.focus();
    }
</script>
</div>
<h2>The Javascript</h2>
<pre><code>
    
    var modal = document.getElementsByClassName('modal')[0];
    var controls = modal.getElementsByClassName('modal-control');

    function modalShift(e,f,g){
    //handle focus between modal elements
        //e - current element
        //f - next element
        //g - previous element
        e.onblur = function (event) {//in case user clicks out of dialog
            //important that all modal controls have this class 'modal-control'
            setTimeout(function () {
                if (!document.activeElement.classList.contains('modal-control')) {
                    event.target.focus();
                }
            },10);
        }
        e.onkeydown = function (event){
            if (event.keyCode === 9) {//tab key
                event.preventDefault();
                if (event.shiftKey) {
                    g.focus();//previuos control
                } else {
                    f.focus();//next control
                }
            }
        };
    }
    
    //middle controls
    for (var i=1,j=controls.length-1;i < j; i++){
        modalShift(controls[i], controls[i+1], controls[i-1]);
    }
    //first control
    modalShift(controls[0], controls[1], controls[controls.length-1]);
    //last control
    modalShift(controls[controls.length-1], controls[0], controls[controls.length-2]);
    
    function closeDialog() {
        modal.className = 'modal closed modal-control';
        document.getElementsByClassName('modal-launcher')[0].focus();
    }
    
    function openDialog() {
        modal.className = 'modal open modal-control';
        modal.setAttribute('tabindex','-1');
        modal.focus();
    }
</code></pre>
</body>
</html>