W3.CSS — Modals

Basic Modal

<!-- Button to open modal -->
<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>

<!-- Modal -->
<div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
        <header class="w3-container w3-blue">
            <span onclick="document.getElementById('id01').style.display='none'" 
                  class="w3-button w3-display-topright">&times;</span>
            <h2>Modal Header</h2>
        </header>
        <div class="w3-container">
            <p>Modal body content goes here.</p>
        </div>
        <footer class="w3-container w3-blue">
            <p>Modal Footer</p>
        </footer>
    </div>
</div>

Modal Styles

<!-- Small modal -->
<div class="w3-modal" style="display:block">
    <div class="w3-modal-content w3-card-4" style="max-width:400px">
        <div class="w3-container">
            <h3>Small Modal</h3>
            <p>This is a small modal.</p>
        </div>
    </div>
</div>

<!-- Large modal -->
<div class="w3-modal" style="display:block">
    <div class="w3-modal-content w3-card-4" style="max-width:800px">
        <div class="w3-container">
            <h3>Large Modal</h3>
            <p>This is a large modal.</p>
        </div>
    </div>
</div>

Modal Examples

<!-- Login modal -->
<button onclick="document.getElementById('login').style.display='block'">Login</button>

<div id="login" class="w3-modal">
    <div class="w3-modal-content w3-card-4" style="max-width:400px">
        <header class="w3-container w3-blue">
            <span onclick="document.getElementById('login').style.display='none'" 
                  class="w3-button w3-display-topright">&times;</span>
            <h2>Login</h2>
        </header>
        <div class="w3-container">
            <form>
                <label>Username</label>
                <input class="w3-input w3-border" type="text">
                
                <label>Password</label>
                <input class="w3-input w3-border" type="password">
                
                <button class="w3-button w3-blue w3-section">Login</button>
            </form>
        </div>
    </div>
</div>

<!-- Confirmation modal -->
<button onclick="document.getElementById('confirm').style.display='block'">Delete</button>

<div id="confirm" class="w3-modal">
    <div class="w3-modal-content w3-card-4" style="max-width:400px">
        <div class="w3-container">
            <h3>Are you sure?</h3>
            <p>This action cannot be undone.</p>
            <button class="w3-button w3-red">Delete</button>
            <button class="w3-button w3-grey">Cancel</button>
        </div>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic modal
2. Adds a login modal
3. Creates a confirmation modal
4. Uses modal with different sizes

Up Next

Next: Learn about W3.CSS Tooltips.