Components : Modal Dialog Box

Preview content adapted to proportion

Modal Dialog Box

Modal

Used to present important information, collect user input, or confirm actions in a user interface.

This component displays a modal dialog box with a semi-transparent background, rounded corners, and a gradient background. It includes a title, interactive elements, and action buttons.

Interaction:

Clicking outside the modal closes it. The header has a close button. Interactive elements within the modal respond to hover and focus states. Action buttons at the bottom allow user confirmation or cancellation.

Responsive:

The modal adjusts its width based on screen size, becoming narrower on smaller screens. The layout changes from a two-column grid to a single column on mobile devices.

Date : June 13, 2025

Copys : 0

fa-tags

User authentication Data confirmation Settings configuration Feedback collection

Code

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
 <div class="@click-outside relative flex h-[90vh] max-w-7xl flex-col rounded-3xl bg-gradient-to-br from-blue-500/20 to-white shadow-2xl transition-all duration-200 sm:w-11/12 md:w-8/12 lg:w-1/3">
  <div class="flex items-center justify-between rounded-t-3xl bg-blue-500 px-8 py-6 shadow-md">
   <h2 class="text-2xl font-semibold text-white">
    Modal Title
   </h2>
   <button class="rounded-full p-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
    ×
   </button>
  </div>
  <div class="grid flex-1 grid-cols-1 gap-6 overflow-y-auto p-8 md:grid-cols-2">
   <div class="space-y-4">
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📁
    </div>
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📊
    </div>
   </div>
   <div class="space-y-6">
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Configuration settings and additional information panel for user interactions.
     </p>
    </div>
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Interactive elements section with dynamic content loading capabilities.
     </p>
    </div>
   </div>
  </div>
  <div class="flex justify-end gap-4 border-t border-blue-100 bg-gray-50 px-8 py-4">
   <button class="rounded-lg bg-gray-100 px-6 py-2 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400">
    Cancel
   </button>
   <button class="rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-400" disabled="">
    Confirm
   </button>
  </div>
 </div>
</div>

<template>
 <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
  <div class="@click-outside relative flex h-[90vh] max-w-7xl flex-col rounded-3xl bg-gradient-to-br from-blue-500/20 to-white shadow-2xl transition-all duration-200 sm:w-11/12 md:w-8/12 lg:w-1/3">
   <div class="flex items-center justify-between rounded-t-3xl bg-blue-500 px-8 py-6 shadow-md">
    <h2 class="text-2xl font-semibold text-white">
     Modal Title
    </h2>
    <button class="rounded-full p-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
     ×
    </button>
   </div>
   <div class="grid flex-1 grid-cols-1 gap-6 overflow-y-auto p-8 md:grid-cols-2">
    <div class="space-y-4">
     <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
      📁
     </div>
     <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
      📊
     </div>
    </div>
    <div class="space-y-6">
     <div class="rounded-lg bg-white p-6 shadow-md">
      <p class="text-sm text-gray-700">
       Configuration settings and additional information panel for user interactions.
      </p>
     </div>
     <div class="rounded-lg bg-white p-6 shadow-md">
      <p class="text-sm text-gray-700">
       Interactive elements section with dynamic content loading capabilities.
      </p>
     </div>
    </div>
   </div>
   <div class="flex justify-end gap-4 border-t border-blue-100 bg-gray-50 px-8 py-4">
    <button class="rounded-lg bg-gray-100 px-6 py-2 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400">
     Cancel
    </button>
    <button class="rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-400" disabled="">
     Confirm
    </button>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyModalComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>


import React from "react";
const MyModalComponent = () => {
    return (
<div>
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
 <div class="@click-outside relative flex h-[90vh] max-w-7xl flex-col rounded-3xl bg-gradient-to-br from-blue-500/20 to-white shadow-2xl transition-all duration-200 sm:w-11/12 md:w-8/12 lg:w-1/3">
  <div class="flex items-center justify-between rounded-t-3xl bg-blue-500 px-8 py-6 shadow-md">
   <h2 class="text-2xl font-semibold text-white">
    Modal Title
   </h2>
   <button class="rounded-full p-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
    ×
   </button>
  </div>
  <div class="grid flex-1 grid-cols-1 gap-6 overflow-y-auto p-8 md:grid-cols-2">
   <div class="space-y-4">
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📁
    </div>
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📊
    </div>
   </div>
   <div class="space-y-6">
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Configuration settings and additional information panel for user interactions.
     </p>
    </div>
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Interactive elements section with dynamic content loading capabilities.
     </p>
    </div>
   </div>
  </div>
  <div class="flex justify-end gap-4 border-t border-blue-100 bg-gray-50 px-8 py-4">
   <button class="rounded-lg bg-gray-100 px-6 py-2 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400">
    Cancel
   </button>
   <button class="rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-400" disabled="">
    Confirm
   </button>
  </div>
 </div>
</div>

</div>
    )
}
export default MyModalComponent;

Recommended Related Components

More+

Floating Action Button with Modal Confirmation

This component is used to prompt users for confirmation before performing a critical action, such as deleting data or submitting a form.

Modal Dialog Box

Used to present important information, collect user input, or confirm actions in a user interface.

Confirmation Modal

Used to confirm critical actions where the user needs to be reminded of the consequences, such as deleting data or leaving a page.