https://github.com/parisikosto/modal-window-ui-component

A modal window UI component crafted with vanilla JavaScript
https://github.com/parisikosto/modal-window-ui-component

css html javascript mini-project modal modal-window responsive ui-component

Last synced: 27 days ago
JSON representation

A modal window UI component crafted with vanilla JavaScript

• Host: GitHub
• URL: https://github.com/parisikosto/modal-window-ui-component
• Owner: parisikosto
• License: mit
• Created: 2026-05-15T16:58:19.000Z (28 days ago)
• Default Branch: main
• Last Pushed: 2026-05-15T18:35:28.000Z (28 days ago)
• Last Synced: 2026-05-15T19:51:50.541Z (28 days ago)
• Topics: css, html, javascript, mini-project, modal, modal-window, responsive, ui-component
• Language: CSS
• Homepage: https://github.parisikosto.com/modal-window-ui-component/
• Size: 14.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Modal Window UI Component

> A modal window UI component crafted with vanilla JavaScript

[![GitHub Pages](https://img.shields.io/badge/Live_Demo-GitHub_Pages-blue?logo=github)](https://parisikosto.github.io/modal-window-ui-component)

[![Docker Hub](https://img.shields.io/docker/v/parisikosto/modal-window-ui-component?label=Docker%20Hub&logo=docker)](https://hub.docker.com/r/parisikosto/modal-window-ui-component)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

- **Live Demo:** [modal-window-ui-component](https://github.parisikosto.com/modal-window-ui-component) — also available at [parisikosto.github.io](https://parisikosto.github.io/modal-window-ui-component)

![modal-window-ui-component-ss-1](https://github.com/user-attachments/assets/f26a324f-2f9f-470b-a510-57e177eda31f)

![modal-window-ui-component-ss-2](https://github.com/user-attachments/assets/498c4592-8633-43ac-951a-5a29e9066e6b)

A customizable and reusable modal window UI component built with HTML, CSS, and JavaScript. This component can be easily integrated into any project and customized to fit your specific design needs.

## Contents

- [Features](#features)

- [Getting Started](#getting-started)

- [Technologies Used](#technologies-used)

- [Credits](#credits)

- [License](#license)

- [Support](#support)

## Features

- Keyboard accessible — close with `Esc`, focus is managed on open/close

- Screen reader friendly — `role="dialog"`, `aria-modal`, `aria-labelledby`

- Click outside the modal to dismiss

- CSS backdrop blur overlay

- Zero dependencies — pure HTML, CSS, and JavaScript

## Getting Started

1. Clone or download the repository.

2. Open the `index.html` file in your preferred browser.

3. Integrate the component into your project by including the CSS and JavaScript files.

4. Customize the appearance and behavior of the modal window to suit your design preferences.

### Docker

```bash

docker run -p 8080:80 parisikosto/modal-window-ui-component

```

Then open `http://localhost:8080`.

## Technologies Used

- HTML

- CSS

- JavaScript

## Credits

Designed and developed by [parisikosto](https://github.com/parisikosto).

## License

This component is licensed under the [MIT License](LICENSE).

## Support

For assistance or inquiries, feel free to open an issue or reach out via GitHub.