Components : Floating Action Button with Modal Confirmation

Preview content adapted to proportion

Floating Action Button with Modal Confirmation

Modal

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

The component features a floating action button that triggers a modal confirmation dialog. The modal includes a title, a description, confirm and cancel buttons, and a gradient footer.

The user interacts with the floating button to open the modal, which can be closed by clicking the close button or the cancel button. The confirm button performs the action, while the cancel button dismisses the modal without any action.


The modal is designed to be responsive, with centered content that adjusts to different screen sizes. The button and modal elements have hover and focus states for better user interaction.

Date : June 07, 2025
Views : 32
Copys : 0

fa-tags

User confirmation dialogs Form submissions Data deletion Settings modifications

Code

<div class="fixed bottom-6 right-6 z-50">
 <button class="bg-[#42D392] hover:bg-[#3AB882] text-[#0A1A2F] px-6 py-3 rounded-full shadow-2xl transform transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#42D392]/50">
  Open Modal
 </button>
</div>
<div class="fixed inset-0 z-50 bg-[#0A1A2F]/90 backdrop-blur-sm hidden transition-opacity duration-300 ease-out" id="overlay">
 <div class="absolute top-4 right-4">
  <button class="text-[#A7B6C2] hover:text-[#42D392] transition-colors duration-200" id="closeBtn">
   <svg class="w-8 h-8" fill="none" stroke="currentColor" viewbox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    </path>
   </svg>
  </button>
 </div>
 <div class="flex items-center justify-center min-h-screen max-w-md mx-auto px-4">
  <div class="bg-[#2D3748] rounded-xl shadow-2xl transform transition-all duration-300 ease-out w-full overflow-hidden">
   <div class="p-6 md:px-8 lg:px-10 space-y-6">
    <div class="text-[#FFD700] text-2xl font-bold">
     Confirmation
    </div>
    <p class="text-[#A7B6C2] leading-relaxed">
     Are you sure you want to perform this action?
    </p>
    <div class="flex gap-4">
     <button class="bg-[#FF6B35] hover:bg-[#E55A28] text-white px-5 py-2.5 rounded-lg flex-1 transition-colors duration-200">
      Confirm
     </button>
     <button class="border border-[#6B7A8F] hover:border-[#42D392] text-[#A7B6C2] hover:text-[#42D392] px-5 py-2.5 rounded-lg flex-1 transition-all duration-200" id="cancelBtn">
      Cancel
     </button>
    </div>
   </div>
   <div class="h-1 bg-gradient-to-r from-[#42D392] to-[#0A1A2F] opacity-80">
   </div>
  </div>
 </div>
</div>
<script>
 document.querySelector('button').addEventListener('click', () => {
    document.getElementById('overlay').classList.remove('hidden');
    document.getElementById('overlay').classList.add('flex');
  });

  document.getElementById('closeBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });

  document.getElementById('cancelBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });
</script>


<template>
 <div class="fixed bottom-6 right-6 z-50">
  <button class="bg-[#42D392] hover:bg-[#3AB882] text-[#0A1A2F] px-6 py-3 rounded-full shadow-2xl transform transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#42D392]/50">
   Open Modal
  </button>
 </div>
 <div class="fixed inset-0 z-50 bg-[#0A1A2F]/90 backdrop-blur-sm hidden transition-opacity duration-300 ease-out" id="overlay">
  <div class="absolute top-4 right-4">
   <button class="text-[#A7B6C2] hover:text-[#42D392] transition-colors duration-200" id="closeBtn">
    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewbox="0 0 24 24">
     <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
     </path>
    </svg>
   </button>
  </div>
  <div class="flex items-center justify-center min-h-screen max-w-md mx-auto px-4">
   <div class="bg-[#2D3748] rounded-xl shadow-2xl transform transition-all duration-300 ease-out w-full overflow-hidden">
    <div class="p-6 md:px-8 lg:px-10 space-y-6">
     <div class="text-[#FFD700] text-2xl font-bold">
      Confirmation
     </div>
     <p class="text-[#A7B6C2] leading-relaxed">
      Are you sure you want to perform this action?
     </p>
     <div class="flex gap-4">
      <button class="bg-[#FF6B35] hover:bg-[#E55A28] text-white px-5 py-2.5 rounded-lg flex-1 transition-colors duration-200">
       Confirm
      </button>
      <button class="border border-[#6B7A8F] hover:border-[#42D392] text-[#A7B6C2] hover:text-[#42D392] px-5 py-2.5 rounded-lg flex-1 transition-all duration-200" id="cancelBtn">
       Cancel
      </button>
     </div>
    </div>
    <div class="h-1 bg-gradient-to-r from-[#42D392] to-[#0A1A2F] opacity-80">
    </div>
   </div>
  </div>
 </div>
 <script>
  document.querySelector('button').addEventListener('click', () => {
    document.getElementById('overlay').classList.remove('hidden');
    document.getElementById('overlay').classList.add('flex');
  });

  document.getElementById('closeBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });

  document.getElementById('cancelBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });
 </script>
</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 bottom-6 right-6 z-50">
 <button class="bg-[#42D392] hover:bg-[#3AB882] text-[#0A1A2F] px-6 py-3 rounded-full shadow-2xl transform transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#42D392]/50">
  Open Modal
 </button>
</div>
<div class="fixed inset-0 z-50 bg-[#0A1A2F]/90 backdrop-blur-sm hidden transition-opacity duration-300 ease-out" id="overlay">
 <div class="absolute top-4 right-4">
  <button class="text-[#A7B6C2] hover:text-[#42D392] transition-colors duration-200" id="closeBtn">
   <svg class="w-8 h-8" fill="none" stroke="currentColor" viewbox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    </path>
   </svg>
  </button>
 </div>
 <div class="flex items-center justify-center min-h-screen max-w-md mx-auto px-4">
  <div class="bg-[#2D3748] rounded-xl shadow-2xl transform transition-all duration-300 ease-out w-full overflow-hidden">
   <div class="p-6 md:px-8 lg:px-10 space-y-6">
    <div class="text-[#FFD700] text-2xl font-bold">
     Confirmation
    </div>
    <p class="text-[#A7B6C2] leading-relaxed">
     Are you sure you want to perform this action?
    </p>
    <div class="flex gap-4">
     <button class="bg-[#FF6B35] hover:bg-[#E55A28] text-white px-5 py-2.5 rounded-lg flex-1 transition-colors duration-200">
      Confirm
     </button>
     <button class="border border-[#6B7A8F] hover:border-[#42D392] text-[#A7B6C2] hover:text-[#42D392] px-5 py-2.5 rounded-lg flex-1 transition-all duration-200" id="cancelBtn">
      Cancel
     </button>
    </div>
   </div>
   <div class="h-1 bg-gradient-to-r from-[#42D392] to-[#0A1A2F] opacity-80">
   </div>
  </div>
 </div>
</div>
<script>
 document.querySelector('button').addEventListener('click', () => {
    document.getElementById('overlay').classList.remove('hidden');
    document.getElementById('overlay').classList.add('flex');
  });

  document.getElementById('closeBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });

  document.getElementById('cancelBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });
</script>

</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.

32
0

Modal Dialog Box

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

20
0

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.

8
0