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

Error popup modal

Author:
Jindřich Stoklasa

1 year ago

2.3k
Sign in Modal
Login to continue modal

Author:
Anonymous

1 year ago

2k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.8k
Confirmation modal with blurred background

Author:
Orion.c

3 years ago

14.2k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

1 year ago

2k
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

8.2k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.6k
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

9 months ago

725
File Upload

Author:
Rajesh Maheshwari

1 year ago

1.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.6k
Login popup
with social media login buttons

Author:
Nikolai

2 years ago

3.7k
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

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components