Created
September 11, 2024 14:37
-
-
Save izblackcat/7cf26fff099c12677ec40a4333d97230 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This is a pretty looking modal in Angular using Tailwind CSS. | |
| _____________________________________________________________________________________________________________ | |
| After `ng g c modal`, in the `modal.component.html` file : | |
| <div class="container mx-auto p-4"> | |
| <button class="bg-blue-500 dark:bg-slate-900 text-white px-4 py-2 rounded" (click)="openModal()"> | |
| Open Modal | |
| </button> | |
| <div [ngClass]="isModalOpen() ? 'block':'hidden'" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center" (click)="closeModalOnClickOutside($event)"> | |
| <div class="bg-white dark:bg-gray-900 dark:text-gray-100 p-8 rounded-lg max-w-md w-full relative"> | |
| <h2 class="text-2xl font-bold mb-4 text-slate-600">Modal Title</h2> | |
| <p class="mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt unde incidunt delectus earum voluptas vero non numquam eaque, quae cumque, repudiandae nesciunt pariatur optio assumenda corrupti consequatur distinctio asperiores omnis. | |
| Consequuntur vero totam fugit placeat, nihil temporibus aspernatur hic provident assumenda quae cupiditate sed, adipisci aut cumque? Veniam est corrupti rerum dolorum vel nobis debitis. Eaque officia commodi illo saepe?</p> | |
| <button class="absolute top-2 right-2 text-gray-600 hover:text-gray-900" (click)="closeModal()"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-gray-600"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> | |
| </svg> | |
| </button> | |
| <button class="bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded" (click)="closeModal()"> | |
| CLOSE | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| _____________________________________________________________________________________________________________ | |
| In `modal.component.ts` file : | |
| import { NgClass } from '@angular/common'; | |
| import { Component, signal } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-modal', | |
| standalone: true, | |
| imports: [NgClass], | |
| templateUrl: './modal.component.html', | |
| styleUrl: './modal.component.css' | |
| }) | |
| export class ModalComponent { | |
| isModalOpen = signal<boolean>(false); | |
| openModal() { | |
| this.isModalOpen.set(true); | |
| } | |
| closeModal() { | |
| this.isModalOpen.set(false); | |
| } | |
| closeModalOnClickOutside(event: MouseEvent) { | |
| const targetElement = event.target as HTMLElement; | |
| if(targetElement.classList.contains('fixed')) { | |
| this.closeModal(); | |
| } | |
| } | |
| } | |
| _____________________________________________________________________________________________________________ | |
| Credits to : [Php Node tuts](https://www.youtube.com/@phpnodetuts). I needed to create a modal using Tailwind CSS for a demo project | |
| and the Tailwind documentation didn't help (there are good modals in tailwind ui for only $299 (-_-)!) and I came accross this channel. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment