How do you create a modal dialog with W3.CSS?

Wrap a w3-modal-content dialog box in a w3-modal overlay, then add or remove the w3-show class to open or close it.

<!-- Trigger button -->
<button onclick="document.getElementById('myModal').classList.add('w3-show')">
    Open Modal
</button>

<!-- Modal structure -->
<div id="myModal" class="w3-modal">
    <div class="w3-modal-content" style="max-width:400px">
        <header class="w3-bar w3-blue">
            <span class="w3-bar-item">Notification</span>
            <button class="w3-bar-item w3-button w3-right"
                    onclick="document.getElementById('myModal').classList.remove('w3-show')">
                &times;
            </button>
        </header>
        <main class="w3-container">
            <p>This is important information.</p>
            <button class="w3-button w3-green"
                    onclick="document.getElementById('myModal').classList.remove('w3-show')">
                OK
            </button>
        </main>
    </div>
</div>

Key points:

• w3-modal - Creates the dark overlay (hidden by default)
• w3-show - Makes the modal visible
• w3-modal-content - The dialog box itself
• Use classList.add('w3-show') to open, classList.remove('w3-show') to close