<!-- This div to make the overlay effect -->
<div id="overlay"></div>
<div id="top">
    <div class="btn" tabindex="0">Sign in</div>
</div>
<br>
<form action="">
    <input type="submit" value="Search" class="backgroundElement">
    <input type="text" class="searchTextBox backgroundElement">
</form>
<div class="modal">
    <form action="" id="modal-form">
        <label for="">
            Username
            <input type="text" id="usernameBox" autocomplete="off">
        </label>
        <br>
        <label for="">
            Password
            <input type="password" id="password" autocomplete="off">
        </label>
        <input type="button" value="Log on" class="logOn">
    </form>
</div>
body {
    position: relative;
}
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.btn {
    display: inline-block;
    width: 100px;
    height: 25px;
    font-size: 18px;
    text-align: center;
    float: right;
    padding: 5px 0;
}
.btn:hover {
    cursor: pointer;
    background: rgb(61, 61, 61);
    color: rgb(209, 209, 209);
}
form {
    text-align: center;
    margin: 100px 0;
}
#top {
    width: 100%;
    background: rgb(209, 209, 209);
    height: 35px;
}
input[type='submit'] {
    min-width: 50px;
    height: 28px;
    font-size: 18px;
}
input[type='text'] {
    min-width: 100px;
    height: 24px;
}
#usernameBox {
    width: 200px;
    height: 24px;
}
#password {
    width: 200px;
    height: 24px;
    margin-top: 10px;
}
label {
    font-size: 18px;
}
.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0 0 0 -150px;
    width: 300px;
    height: 300px;
    z-index: 2;
    background: white;
    border: 2px solid;
    visibility: hidden;
}
.modal-visible {
    visibility: visible;
}
.logOn {
    margin: 25px 0;
}
const allBackgroundElements = document.querySelectorAll('.backgroundElement, [tabindex="0"]')
const signInBtn = document.querySelector('.btn')
const logOnBtn = document.querySelector('.logOn')
const modal = document.querySelector('.modal')
const usernameTextBox = document.getElementById('usernameBox')
const searchTextBox = document.querySelector('.searchTextBox')
const passwordTextBox = document.getElementById('password')
const overlay = document.getElementById('overlay')

//listen for keydown. Check for target of the event.
document.addEventListener('keydown', (e) => {
    //if target is sign in button, check the key pressed.
    if (e.target === signInBtn) {
        //if key is "Enter":
        //Show modal.
        //Remove elements outside modal from tab order.
        //Focus on user name text box.
        //display overlay.
        if (e.keyCode === 13) {
            modal.classList.add('modal-visible')
            for (const element of allBackgroundElements) {
                element.setAttribute('tabindex', "-1")
            }
            usernameTextBox.focus()
            overlay.style.display = "block"
        }
    } else if (e.target === logOnBtn) {
        //if target is log on button, check for key(s) pressed.
        //if keys are "shift" and "tab":
        //Focus on password text box.
        if (e.shiftKey && e.keyCode === 9) {
            e.preventDefault()
            passwordTextBox.focus()
        } else if (e.keyCode === 13) {
            //if key is "Enter":
            //hide modal.
            //Add elements outside modal to tab order.
            //Focus on search text box.
            //hide overlay.
            e.preventDefault()
            modal.classList.remove('modal-visible')
            for (const element of allBackgroundElements) {
                element.setAttribute('tabindex', "0")
            }
            searchTextBox.focus()
            overlay.style.display = "none"
            //if key is "Tab":
            //Focus on user name text box.
        } else if (e.keyCode === 9) {
            e.preventDefault();
            usernameTextBox.focus()
        }
    } else if (e.target === usernameTextBox) {
        //If target is user name text box, check for keys pressed.
        //if keys are "shift" and "tab":
        //Focus on log on button.
        if (e.shiftKey && e.keyCode === 9) {
            e.preventDefault()
            logOnBtn.focus()
        }
    }
})

//listen for Click. Check for target of the event.
document.addEventListener('click', (e) => {
    //If target is sign in button:
    //Show modal.
    //Remove elements outside modal from tab order.
    //Focus on user name text box.
    //display overlay.
    if (e.target === signInBtn) {
        modal.classList.add('modal-visible')
        for (const element of allBackgroundElements) {
            element.setAttribute('tabindex', "-1")
        }
        usernameTextBox.focus()
        overlay.style.display = "block"
    } else if (e.target === logOnBtn) {
        //if target is log on button:
        //hide modal.
        //Add elements outside modal to tab order.
        //Focus on search text box.
        //hide overlay.
        modal.classList.remove('modal-visible')
        for (const element of allBackgroundElements) {
            element.setAttribute('tabindex', "0")
        }
        searchTextBox.focus()
        overlay.style.display = "none"
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.