Home
Omer fils ELENGA
iOS 16 Popup

iOS 16 Popup

iOS 16 Popup — Alpine.js

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>iOS 16 Popup — Alpine.js</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['SF Pro Text', '-apple-system', 'BlinkMacSystemFont', 'Inter', 'sans-serif']
          }
        }
      }
    }
  </script>
  <style>
    body {
      background: #000;
      color: white;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

/* Fond animé subtil (optionnel) */
    .bg-pattern {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.03), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(139, 92, 246, 0.03), transparent 40%);
      z-index: -1;
    }

/* Popup iOS 26 */
    .ios-popup {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 24px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      max-width: 380px;
      width: 90vw;
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

.ios-popup.pop-in {
      transform: translateY(0);
      opacity: 1;
    }

.ios-popup.pop-out {
      transform: translateY(20px);
      opacity: 0;
    }

/* Boutons */
    .popup-btn {
      padding: 16px;
      font-weight: 500;
      font-size: 17px;
      text-align: center;
      transition: background 0.2s;
    }

.popup-btn:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

.popup-btn.action {
      color: #4f46e5;
    }

.popup-btn.destructive {
      color: #f87171;
    }

.popup-btn.cancel {
      color: #94a3b8;
    }

.popup-btn:hover, .popup-btn:focus {
      background: rgba(255, 255, 255, 0.08);
      outline: none;
    }
  </style>
</head>
<body x-data="{ open: false }" @keydown.escape.window="open = false">
  <div class="bg-pattern"></div>

<button 
    @click="open = true"
    class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 rounded-xl text-white font-medium text-lg shadow-lg"
  >
    Open iOS 26 Popup
  </button>

<div 
    x-show="open"
    x-transition:enter="transition"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
    role="dialog"
    aria-modal="true"
    aria-labelledby="popup-title"
  >
    <div 
      @click.away="open = false"
      class="ios-popup pop-in w-full"
    >
      <div class="p-5">
        <h2 id="popup-title" class="text-xl font-semibold text-center text-white">Are you sure?</h2>
        <p class="mt-2 text-center text-gray-400 text-sm">
          This action cannot be undone.
        </p>
      </div>

<div class="divide-y divide-gray-800">
        <button 
          @click="open = false"
          class="popup-btn action w-full"
        >
          Confirm Action
        </button>
        <button 
          @click="open = false"
          class="popup-btn destructive w-full"
        >
          Delete Permanently
        </button>
        <button 
          @click="open = false"
          class="popup-btn cancel w-full"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Related Examples

Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

847
Reward modal
A reward modal with refferal link

Author:
ehmasuk

4 months ago

275
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

14.3k
button
Background Studio

Author:
nickosamba.nh21

3 weeks ago

53
Confirmation Dialog Box

Author:
Anonymous

2 years ago

16.3k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

12k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

2 years ago

8k
Blurred Background Modal

Author:
Prem..

2 years ago

13.6k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

3.5k
Modal with Tailwind CSS

Author:
EliteAI Tools

1 year ago

1.6k
Modal multiple window

Author:
Maxim

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components