Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zheng-bote/rz-modal_dialog
A Web Component for HTML dialog or modal
https://github.com/zheng-bote/rz-modal_dialog
web-component
Last synced: about 1 month ago
JSON representation
A Web Component for HTML dialog or modal
- Host: GitHub
- URL: https://github.com/zheng-bote/rz-modal_dialog
- Owner: Zheng-Bote
- Created: 2024-01-27T17:41:10.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-27T17:48:38.000Z (10 months ago)
- Last Synced: 2024-10-15T17:34:26.484Z (about 1 month ago)
- Topics: web-component
- Language: CSS
- Homepage:
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rz-modal_dialog
A Web Component for HTML dialog or modal
show or hide dialog or modal, with/without footer and red/yellow/green title
## Status
## Authors
- [@Zheng-Bote](https://www.github.com/Zheng-Bote)
## Version
v0.1.0
## License
[MIT](https://choosealicense.com/licenses/mit/)
## API Reference
#### Parameters
```
```
```
```
```
```
| Parameter | Type | Description |
| :-------- | :------- | :------------------------------------ |
| `title` | `string` | "title of dialog or modal" |
| `body` | `string` | "content text" |
| `footer` | `string` | "footer text" |
| `footer` | `string` | "" => no property or empty: no footer |
## Installation
used folder structure
```bash
.
├── assets
│ ├── css
│ │ └── index.css
│ ├── img
│ │ ├── Screenshot_default_footer_green.png
│ │ ├── Screenshot_default_footer_new_text.png
│ │ ├── Screenshot_default_footer_new_text_yellow.png
│ │ ├── Screenshot_default_footer.png
│ │ ├── Screenshot_default_red.png
│ │ └── Screenshot_no_footer_green.png
│ └── js
│ └── rz-modal.js
├── favicon.ico
├── index.html
└── README.md
```
## Usage/Examples
```html
Web Component
Web-Component »rz-modal_dialog«
A Web Component for dialog or modal
steering via properties
show or hide dialog or modal, with/without footer and red/yellow/green
title
example
show dialog
show modal
change text
no footer
change red
change yellow
change green
/* ##### the buttons ##### */
document
.getElementById("rz_btn_dialog_show")
.addEventListener("click", () => {
document.getElementById("rz_modal").show();
document.getElementById("rz_modal_header").classList.add(this.color);
});
document
.getElementById("rz_btn_modal_show")
.addEventListener("click", () => {
document.getElementById("rz_modal").showModal({ backdrop: true });
});
/* ##### examples change props ##### */
document.getElementById("rz_btn_text").addEventListener("click", () => {
document.getElementById("rz-dialog").title = "new Title";
document.getElementById("rz-dialog").body = "new Body";
document.getElementById("rz-dialog").footer = "new Footer";
});
document
.getElementById("rz_btn_no_footer")
.addEventListener("click", () => {
document.getElementById("rz-dialog").footer = "";
});
document.getElementById("rz_btn_red").addEventListener("click", () => {
document.getElementById("rz-dialog").color = "red";
document.getElementById("rz-dialog").title = "critical";
document.getElementById("rz-dialog").body = "critical text";
});
document.getElementById("rz_btn_yellow").addEventListener("click", () => {
document.getElementById("rz-dialog").color = "yellow";
document.getElementById("rz-dialog").title = "warning";
document.getElementById("rz-dialog").body = "warning text";
});
document.getElementById("rz_btn_green").addEventListener("click", () => {
document.getElementById("rz-dialog").color = "green";
document.getElementById("rz-dialog").title = "ok";
document.getElementById("rz-dialog").body = "ok text";
});
/* ##### examples change props ##### */
```
## Screenshots
**default**
**yellow title new text**
**new text**
**default with footer**
**default with red title**
**green title no footer**
## Used By
This web component is used by the following web sites:
- [hase-zheng.net: Micro-Frontends and Microservices](https://www.hase-zheng.net)
- [Robert Zheng Landing Page](https://www.robert.hase-zheng.net)
- [Points of Interest: Geo-Coordinates and Photos of POI's](https://www.flag-me.info/)
- [ZHENG Bote: private travel photos](https://www.bote.hase-zheng.net/)
- [DigiDocuDev: web-based documentation management](https://www.digidocu.dev/)
### the end
:vulcan_salute: