{"id":18308225,"url":"https://github.com/takaneichinose/message-box-web-component","last_synced_at":"2026-04-13T03:03:23.038Z","repository":{"id":93601307,"uuid":"329146175","full_name":"takaneichinose/message-box-web-component","owner":"takaneichinose","description":"Alert, Confirm, Prompt dialog box (modal) in Web Components","archived":false,"fork":false,"pushed_at":"2021-01-13T08:18:21.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T11:33:58.361Z","etag":null,"topics":["alert","async","async-await","await","await-async","await-promises","confirm","css","dialog","html","javascript","javascript-es6","messagebox","modal","modal-dialog","nodejs","promise","prompt","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/takaneichinose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-13T00:09:54.000Z","updated_at":"2023-03-10T07:03:08.000Z","dependencies_parsed_at":"2023-04-05T20:04:01.275Z","dependency_job_id":null,"html_url":"https://github.com/takaneichinose/message-box-web-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/takaneichinose/message-box-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takaneichinose%2Fmessage-box-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takaneichinose%2Fmessage-box-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takaneichinose%2Fmessage-box-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takaneichinose%2Fmessage-box-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/takaneichinose","download_url":"https://codeload.github.com/takaneichinose/message-box-web-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takaneichinose%2Fmessage-box-web-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278561264,"owners_count":26006954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","async","async-await","await","await-async","await-promises","confirm","css","dialog","html","javascript","javascript-es6","messagebox","modal","modal-dialog","nodejs","promise","prompt","typescript","webcomponents"],"created_at":"2024-11-05T16:07:17.413Z","updated_at":"2025-10-06T04:47:18.255Z","avatar_url":"https://github.com/takaneichinose.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Message Box Web Component\n\n## Description\n\nThis is a Web Component's custom element to implement message box in HTML, CSS, and Javascript.\n\nI didn't use any preprocessors, libraries, and frameworks in my Javascript code, so that I could use this dialog box wherever I want.\n\nI used custom element to create my own dialog box, and shadow DOM for me to style my component without affecting any of the styles outside the shadow DOM. Although, I used a class name, I think that might be unique.\n\nBecause I used Web Components, Promise, async/await to implement the dialog box, this function might not work on older browsers.\n\nThe color scheme of dialog box can be light or dark depends on the color scheme of your system.\n\n## Installation\n\nI used **Typescript** transpiler in this project. These are needed to transpile the Typescript codes into Javascript codes.\n\n1. First, to be able to use these libraries, **NodeJS** is required.\n2. Install packages by running the command below on your Terminal:\n```\nyarn\n```\n3. If the installation is successful, run the command below on your Terminal:\n```\nyarn build\n```\n4. If building is successful, *dist* folder will be created. (By default I also included the folder)\n\n## Usage\n\n### On HTML code\n\nImport the **ti-msg-box.js** file on your HTML file to get started.\n\n```HTML\n\u003cscript src=\"\u003cdirectory-goes-here\u003e/ti-msg-box-js\"\u003e\u003c/script\u003e\n```\n\nAfter the Javascript is imported, you may use Web Component like the codes below.\n\n```HTML\n\u003cti-msg-box data-title=\"Title goes here.\" data-content=\"Content goes here.\" data-type=\"alert\"\u003e\u003c/ti-msg-box\u003e\n```\n\nMessage box is a custom element, so the ```\u003cti-msg-box\u003e``` tag may just be explicitly called from HTML source code.\n\n### On Javascript code\n\n```Javascript\n// Call the alert box\nawait TiMsgBox.alert(\"Content goes here.\", \"Title goes here. This is optional\");\n\n// Call the confirm box\nawait TiMsgBox.confirm(\"Content goes here.\", \"Title goes here. This is optional\");\n\n// Call the prompt box\nawait TiMsgBox.prompt(\"Content goes here.\", \"Title goes here. This is optional\");\n```\n\nAdding ```await``` before calling the ```TiMsgBox.alert()```, ```TiMsgBox.confirm()```, ```TiMsgBox.prompt()``` function is important, so that the processes below the message box will not be executed, unless there was an action on the message box.\n\nKeep note that you can't use ```await``` if the message box function call is not inside an ```async``` function. Below is the example:\n\n```Javascript\n// Inside a function\nasync function funcName() {\n  await TiMsgBox.alert(\"Content goes here.\");\n  \n  // Do another process here\n}\n\n// Inside an event function\nelm.addEventListener(\"click\", async function() {\n  await TiMsgBox.alert(\"Content goes here.\");\n  \n  // Do another process here\n});\n```\n\n## Demo\n\nClick on this link [Alert, Confirm, Prompt dialog box (modal) in Web Components](https://codepen.io/takaneichinose/pen/LYRrQmW) to see the actual demo of this component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakaneichinose%2Fmessage-box-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftakaneichinose%2Fmessage-box-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakaneichinose%2Fmessage-box-web-component/lists"}