{"id":13990070,"url":"https://github.com/electerious/basicModal","last_synced_at":"2025-07-22T11:32:42.535Z","repository":{"id":16655769,"uuid":"19411240","full_name":"electerious/basicModal","owner":"electerious","description":"Easy-to-use dialog system for modern web-apps.","archived":true,"fork":false,"pushed_at":"2018-04-22T10:28:57.000Z","size":177,"stargazers_count":282,"open_issues_count":4,"forks_count":29,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-10T08:33:18.451Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/electerious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-03T20:11:38.000Z","updated_at":"2024-09-26T18:32:34.000Z","dependencies_parsed_at":"2022-09-06T11:10:46.089Z","dependency_job_id":null,"html_url":"https://github.com/electerious/basicModal","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electerious","download_url":"https://codeload.github.com/electerious/basicModal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227089509,"owners_count":17729478,"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","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":[],"created_at":"2024-08-09T13:02:20.258Z","updated_at":"2024-11-29T09:30:44.729Z","avatar_url":"https://github.com/electerious.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# [Deprecated] basicModal\n\nEasy-to-use dialog system for modern web-apps.\n\n![Modal Screenshot](https://l.electerious.com/uploads/big/0aac1124d3884e2ac0d62f0879d27333.png)\n\nbasicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Dialogs can be chained, so you can easily build a setup-assistant or show messages in a predefined order. Invalid input can be highlighted and handled using the included function.\n\nbasicModal is written in Vanilla JS and has zero dependencies. It uses [SASS](http://sass-lang.com) and [Flexbox](http://dev.w3.org/csswg/css-flexbox/).\n\nTested with the latest versions of [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), [Apple Safari](https://www.apple.com/safari/), [Google Chrome](https://www.google.com/chrome/browser/), [Microsoft Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) (10+) and [Opera](https://www.opera.com/).\n\n## Contents\n\n- [Demos](#demos)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Setup](#setup)\n- [Usage](#usage)\n\t- [Alert](#alert)\n\t- [Prompt](#prompt)\n\t- [Input](#input)\n- [Functions](#functions)\n\t- [Show](#show)\n\t- [Error](#error)\n\t- [Visible](#visible)\n\t- [Action \u0026 Cancel](#action--cancel)\n\t- [Reset](#reset)\n\t- [Get Values](#get-values)\n\t- [Close](#close)\n- [Options](#options)\n\n## Demos\n\n| Name | Description | Link |\n|:-----------|:------------|:------------|\n| Alert | Modal similar to `alert()`. The modal contains a message and a button. The message can be filled with HTML and the button fires the specified function when pressed. | [Demo](https://basicmodal.electerious.com/#alert) |\n| Prompt | The prompt dialog is great when you want a decision or answer from the user. | [Demo](https://basicmodal.electerious.com/#prompt) |\n| Login | Building a login with basicModal is super easy. It includes everything you need, like the ability to highlight invalid input. | [Demo](https://basicmodal.electerious.com/#login) |\n\n## Features\n\n- Works in all modern browsers\n- Zero dependencies\n- CommonJS and AMD support\n- Support for text inputs\n- Highlight invalid input\n- Execute dialogs in row\n\n## Requirements\n\nbasicModal depends on the following browser APIs:\n\n- [classList](http://caniuse.com/#feat=classlist)\n- [Flexible Box Layout Module](http://caniuse.com/#feat=flexbox)\n\nSome of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.\n\n## Setup\n\nWe recommend to install basicModal using [Bower](https://bower.io/) or [npm](https://npmjs.com).\n\n```sh\nbower install basicModal\n```\n```sh\nnpm install basicmodal\n```\n\nInclude the CSS file in the `head` tag and the JS file at the end of your `body` tag…\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/basicModal.min.css\"\u003e\n```\n```html\n\u003cscript src=\"dist/basicModal.min.js\"\u003e\u003c/script\u003e\n```\n\n…or skip the JS file and use basicModal as a module:\n\n```js\nconst basicModal = require('basicmodal')\n```\n\n## Usage\n\n### Alert\n\nLets start with a modal similar to `alert()`. The modal contains a message and a button. The message can be filled with HTML and the button fires the specified function when pressed.\n\n```js\nbasicModal.show({\n\tbody: '\u003cp\u003eThis is a dead-simple alert modal!\u003cbr\u003eThe message can be filled with anything you want.\u003c/p\u003e',\n\tbuttons: {\n\t\taction: {\n\t\t\ttitle: 'Dismiss',\n\t\t\tfn: basicModal.close\n\t\t}\n\t}\n})\n```\n\n### Prompt\n\nThe prompt dialog is great when you want a decision or answer from the user. The only difference from the first example is the additional button.\n\n```js\nbasicModal.show({\n\tbody: '\u003cp\u003eThis type of modal can be used to ask the user questions. Are you sure you want to continue?\u003c/p\u003e',\n\tbuttons: {\n\t\tcancel: {\n\t\t\ttitle: 'Cancel',\n\t\t\tfn: basicModal.close\n\t\t},\n\t\taction: {\n\t\t\ttitle: 'Continue',\n\t\t\tfn: basicModal.close\n\t\t}\n\t}\n})\n```\n\n### Input\n\nBuilding an input-dialog with basicModal is super easy. It includes everything you need, like the ability to highlight invalid fields. The specified action-button-function receives an object which includes the values of all inputs. Use the name attribute in your HTML to set the name of the inputs.\n\n```js\nbasicModal.show({\n\tbody: '\u003cp\u003eThis type of modal can be used to ask the user questions. Please enter your name:\u003c/p\u003e\u003cinput class=\"basicModal__text\" type=\"text\" name=\"name\" placeholder=\"Jane Doe\"\u003e',\n\tbuttons: {\n\t\tcancel: {\n\t\t\ttitle: 'Cancel',\n\t\t\tfn: basicModal.close\n\t\t},\n\t\taction: {\n\t\t\ttitle: 'Continue',\n\t\t\tfn: (data) =\u003e {\n\n\t\t\t\tif (data.name.length===0) return basicModal.error('name')\n\n\t\t\t\tconsole.log(data)\n\t\t\t\tbasicModal.close()\n\n\t\t\t}\n\t\t}\n\t}\n})\n```\n\n## Functions\n\nbasicModal comes with a handful of handy functions. Below are all of them along with a short description.\n\n### Show\n\nThe most important function of basicModal. Call `show` to show a modal. The `object` you pass to the function includes all the information about the modal. Take a look at the demos above to get a feel of the capabilities.\n\n```ts\nbasicModal.show(options: object)\n```\n\n### Error\n\nUse the `error` function to highlight invalid input. This function can only be used when the modal has input elements. Each input needs a `name` attribute as shown in the example above. The input with the matching attribute will be marked red and the modal will shake to signal an error. This function also executes the `reset` function, to remove previous errors and to reactive the buttons.\n\n```ts\nbasicModal.error(nameAttribute: string)\n```\n\n### Visible\n\nCheck if there's a visible modal. Returns `true` when a modal is visible and `false` otherwise.\n\n```ts\nbasicModal.visible() : boolean\n```\n\n### Action \u0026 Cancel\n\nYou can trigger the buttons of the modal manually if wanted. Triggering a button is equivalent to clicking them.\n\n```ts\nbasicModal.action() : boolean\n```\n\n```ts\nbasicModal.cancel() : boolean\n```\n\n### Reset\n\nIn order to avoid multiple executions of the same function, buttons can only be pressed once before being disabled. Use reset if you want to reactivate the buttons or to reset the highlighted input errors.\n\n```ts\nbasicModal.reset() : boolean\n```\n\n### Get Values\n\nThe following function returns an object, which includes all input values from the current modal.\n\n```ts\nbasicModal.getValues() : object\n```\n\n### Close\n\nAnd finally: Close the modal. You can force close a modal by passing true to the function. This is required when the modal is created with the closable property set to `false`.\n\n```ts\nbasicModal.close(forceClose: boolean) : boolean\n```\n\n## Options\n\nList of options you can pass to the `basicModal.show` function:\n\n```js\nbasicModal.show({\n\n\t// String containing HTML (required)\n\tbody: '\u003cp\u003eString containing HTML\u003c/p\u003e',\n\n\t// String - List of custom classes added to the modal (optional)\n\tclass: 'customClass01 customClass02',\n\n\t// Boolean - Define if the modal can be closed with the close-function (optional)\n\tclosable: true,\n\n\t// Function - Will fire when modal is visible (optional)\n\tcallback: undefined,\n\n\t// Object - basicModal accepts up to two buttons and requires at least one of them\n\tbuttons: {\n\n\t\tcancel: {\n\n\t\t\t// String (optional)\n\t\t\ttitle: 'Cancel',\n\n\t\t\t// String - List of custom classes added to the button (optional)\n\t\t\tclass: 'customButtonClass',\n\n\t\t\t// Function - Will fire when user clicks the button (required)\n\t\t\tfn: basicModal.close\n\n\t\t},\n\n\t\taction: {\n\n\t\t\t// String (optional)\n\t\t\ttitle: 'OK',\n\n\t\t\t// String - List of custom classes added to the button (optional)\n\t\t\tclass: 'customButtonClass',\n\n\t\t\t// Function - Will fire when user clicks the button (required)\n\t\t\tfn: (data) =\u003e basicModal.close()\n\n\t\t}\n\n\t}\n\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2FbasicModal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felecterious%2FbasicModal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2FbasicModal/lists"}