iRuemu Coding Blog

Creating a Modal for Login and Register Forms: A Step-by-Step Guide

Photo by Andrew Neel on Unsplash

Creating a Modal for Login and Register Forms: A Step-by-Step Guide

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

Table of contents

In this tutorial, we'll guide you through creating a modal that allows users to switch between "Login" and "Register" forms in a seamless and user-friendly manner. We'll provide you with the HTML, CSS, and JavaScript code needed to implement this feature on your website.

Step 1: Setting Up the HTML Structure

Start by creating the necessary HTML structure for the modal, forms, and other components.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Include necessary meta tags, title, and CSS links -->
</head>
<body>
    <!-- Navigation and other content -->

    <nav>
        <!-- Navigation content -->
    </nav>

    <!-- Modal for Login and Register Forms -->
    <div class="logme">
        <div id="logcontainer">
            <div class="authform">
                <div class="auth1">
                    <div class="authlog active">Login</div>
                    <div class="authreg">Register</div>
                </div>
                <div class="auth2">
                    <!-- Close button -->
                </div>
            </div>
            <div class="authcontent">
                <div id="login-content">
                    <!-- Login form -->
                    <form id="login-form">
                        <!-- Login form fields -->
                    </form>
                </div>
                <div id="reg-content">
                    <!-- Register form -->
                    <form id="register-form">
                        <!-- Register form fields -->
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Overlay for background dimming -->
    <div class="overlay"></div>

    <!-- Include necessary JavaScript -->
    <script>
        // JavaScript code (Refer to the provided script)
    </script>
</body>
</html>

Step 2: Styling the Modal

Add CSS styles to make the modal visually appealing and position it correctly on the page.

/* Styling the modal and overlay */
#logcontainer {
    /* Positioning and sizing */
    position: fixed;
    top: 78px;
    bottom: 0px;
    width: 100%;
    max-height: calc(100% - 78px);

    /* Visual appearance */
    background-color: blue;
    z-index: 999;
    overflow-y: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0;
}

.overlay {
    /* Overlay styles */
        display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 998;
}

Step 3: JavaScript Functionality

The JavaScript code manages modal behaviour, form toggling, and handling clicks outside the modal.

<script>
    const loginButton = document.getElementById('loginButton');
    const registerButton = document.getElementById('registerButton');
    const logme = document.querySelector('.logme');
    const overlay = document.querySelector('.overlay');
    const authlog = document.querySelector('.authlog');
    const authreg = document.querySelector('.authreg');
    const loginContent = document.getElementById('login-content');
    const regContent = document.getElementById('reg-content');

    // Function to show the Login content and set the appropriate active class
    function showLoginContent() {
        loginContent.style.display = 'block';
        regContent.style.display = 'none';
        authlog.classList.add('active');
        authreg.classList.remove('active');
    }

    // Function to show the Register content and set the appropriate active class
    function showRegisterContent() {
        regContent.style.display = 'block';
        loginContent.style.display = 'none';
        authreg.classList.add('active');
        authlog.classList.remove('active');
    }

    // Add click event listener to the document to hide the modal when clicking outside
    document.addEventListener('click', function(event) {
        if (!logme.contains(event.target) && event.target !== loginButton && event.target !== registerButton) {
            closeModal();
        }
    });

    // Add click event listeners to the "Login" and "Register" buttons to toggle between containers
    authlog.addEventListener('click', showLoginContent);
    authreg.addEventListener('click', showRegisterContent);

    // Toggle modal display and content for "Login" and "Register" buttons
    loginButton.addEventListener('click', function() {
        if (logme.style.display === 'block') {
            closeModal();
        } else {
            logme.style.display = 'block';
            overlay.style.display = 'block';
            document.body.style.overflow = 'hidden';
            showLoginContent();
        }
    });

    registerButton.addEventListener('click', function() {
        if (logme.style.display === 'block') {
            closeModal();
        } else {
            logme.style.display = 'block';
            overlay.style.display = 'block';
            document.body.style.overflow = 'hidden';
            showRegisterContent();
        }
    });

    function closeModal() {
        logme.style.display = 'none';
        overlay.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
</script>

Step 4: Styling and Customization

Feel free to further customize the styles to match your website's design, including colours, fonts, and layout. This ensures a consistent and visually appealing user experience.

By following these steps and using the provided HTML, CSS, and JavaScript code, you can create an interactive modal that seamlessly switches between "Login" and "Register" forms. Enhance user engagement and provide a user-friendly experience on your website.

modalloginregisterHTML5JavaScript