About this snippet

Build a fast popup using the native HTML popover attribute. We just added simple CSS, so you skip heavy libraries yet get a great accessible dialog.

Size
2.8 KB
Uses
HTML, CSS
Loads
Nothing external
Views
103

Collections

Related snippets

<div class="page-wrap">
  <button class="trigger-btn" popovertarget="native-modal">Open Native Modal</button>
  
  <div id="native-modal" popover>
    <div class="modal-header">
      <h3>Account Settings</h3>
      <button class="close-btn" popovertarget="native-modal" popovertargetaction="hide" aria-label="Close">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p>Update your email preferences here. We keep our design simple, which means you can easily customize it for your own web apps.</p>
      <button class="save-btn">Save Changes</button>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.trigger-btn {
  background: #111827;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.trigger-btn:hover {
  background: #374151;
}

#native-modal {
  border: none;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0;
  max-width: 400px;
  width: 100%;
  transition: opacity 0.3s, transform 0.3s;
  background: #ffffff;
}

#native-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s;
}

#native-modal:popover-open {
  opacity: 1;
  transform: scale(1);
}

#native-modal:not(:popover-open) {
  opacity: 0;
  transform: scale(0.95);
  display: none;
}

@starting-style {
  #native-modal:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
  #native-modal:popover-open::backdrop {
    opacity: 0;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #111827;
}

.close-btn {
  background: #f3f4f6;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.close-btn:hover {
  background: #e5e7eb;
  color: #111827;
}

.modal-body {
  padding: 24px;
  color: #4b5563;
  line-height: 1.6;
}

.modal-body p {
  margin-top: 0;
  margin-bottom: 24px;
}

.save-btn {
  width: 100%;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.save-btn:hover {
  background: #2563eb;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save