Welcome to the Draggable Popup Modal Using HTML, CSS, and JavaScript, an interactive web component designed to elevate user experience with modern UI features. This project combines sleek animations, responsive design, and a fully draggable modal window, making it versatile for use in various applications like notifications, tutorials, or dynamic content displays. The modal features a structured layout with a title, subtitle, image, and customizable text, giving developers the flexibility to adapt it to their needs. With smooth open and close animations and intuitive controls, this popup creates a polished and professional experience for users.

Built using fundamental web technologies like HTML for structure, CSS for styling, and JavaScript for functionality, this project is ideal for beginners and professionals looking to learn or implement a reusable modal in their projects. It also leverages external libraries like FontAwesome for icons, ensuring a modern touch to the interface. Whether you’re building a portfolio website, an e-commerce platform, or a dashboard, this draggable popup modal is a perfect addition to enhance engagement and interactivity.

You may also check this simple HTML, CSS and JavaScript project:

• Browser Detector Tool
• Skeleton Loading Screen Animation
• Height Converter App
• Pop It Game
• Hoverable Sidebar Menu

Features:

1. Draggable Modal Window:
   Users can click and drag the modal dialog to reposition it anywhere on the screen.
2. Dynamic Open and Close Animations:
   The modal appears with a smooth fade-in effect and closes with a fade-out effect for better visual feedback.
3. Content-Rich Design:
   • Header Section: Includes a main title and subtitle.
   • Body Section: Supports images and text with clean and professional styling.
   • Footer Section: Displays contact information and interactive icons.
4. Fully Responsive Design:
   The modal adjusts seamlessly across various screen sizes and orientations, ensuring usability on desktop and mobile devices.
5. Intuitive User Interactions:
   • "Open Modal" button to activate the popup.
   • "Close" button within the modal for user-friendly dismissal.

Technologies Used:

1. HTML5:
   Used to structure the modal's content and layout.
2. CSS3:
   • Responsible for the modern and responsive design.
   • Gradient backgrounds, smooth transitions, animations, and hover effects are implemented for an aesthetic user interface.
3. JavaScript (ES6):
   • Handles the dynamic behavior of the modal.
   • Implements click events for opening and closing the modal.
   • Enables the draggable feature using mouse events (mousedown, mousemove, mouseup).
4. FontAwesome:
   For the inclusion of interactive and scalable icons in the footer section.

How to Use:

1. Setup the Environment:
   • Copy the provided HTML, CSS, and JavaScript code into your project files.
   • Ensure you have an internet connection for loading external resources (Google Fonts and FontAwesome).
2. Opening the Modal:
   • Click the "Open Modal" button to display the popup.
3. Dragging the Modal:
   • Click anywhere inside the modal (excluding the "Close" button).
   • Hold and drag to reposition the modal as desired.
4. Closing the Modal:
   • Click the "×" button in the top-right corner to close the popup.

Sample Screenshots of the Project:

Landing Page

Modal Popup

Dragged Modal

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion: