Modal with Vanilla JS: Full Code

### CSS Effects **Tags:** Modal, Vanilla JS, Inter Font, Rounded Corners, Soft Shadows **Summary:** A fully functional modal component implemented using vanilla JavaScript with a modern UI design. --- ### ✨ Overview This example demonstrates how to create a modal popup using pure vanilla JavaScript. The modal features rounded corners, soft shadows, and a modern typography style. ### 🧱 Full Implementation

LIVE PREVIEW

Interactive

Modal Title

×

This is a modal dialog box.

HTML

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
  
  body { font-family: 'Inter', system-ui, sans-serif; background: #f3f4f6; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
  }
  
  .modal-header {
    margin-bottom: 20px;
  }
  
  .modal-header h2 {
    font-size: 24px;
    color: #1d3557;
  }
  
  .modal-body p {
    font-size: 16px;
    color: #6b7280;
  }
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #9ca3af;
  }
</style>

<div id="app">
  <button id="openModalBtn">Open Modal</button>
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal" id="modal">
      <div class="modal-header">
        <h2>Modal Title</h2>
        <span class="close-btn" id="closeModalBtn">&times;</span>
      </div>
      <div class="modal-body">
        <p>This is a modal dialog box.</p>
      </div>
    </div>
  </div>
</div>

<script>
  document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('modalOverlay').classList.add('active');
  });

  document.getElementById('closeModalBtn').addEventListener('click', function() {
    document.getElementById('modalOverlay').classList.remove('active');
  });
</script>

### 💡 Explanation 1. **HTML Structure:** - The modal is encapsulated within a `.modal-overlay` div, which acts as the backdrop for the modal. - Inside the overlay, there's a `.modal` div that contains the content of the modal. 2. **CSS Styling:** - The `@import` statement includes the Inter font from Google Fonts. - Basic styling is applied to the body to center its contents. - The `.modal-overlay` has a semi-transparent background and uses flexbox for centering. - The `.modal` div has rounded corners, soft shadows, and padding. 3. **JavaScript Functionality:** - Event listeners are added to the "Open Modal" button to toggle the `active` class on the modal overlay, which controls its visibility. - Similarly, a click event listener is attached to the close button within the modal to hide it again.

---

ℹ️ Note: Code snippets are ready to copy-paste.

📚 More to Read

• 👉 Dev_Toolkit Insights