{"id":20080646,"url":"https://github.com/bluzky/timodal","last_synced_at":"2025-05-05T23:31:20.081Z","repository":{"id":77212011,"uuid":"48434607","full_name":"bluzky/tiModal","owner":"bluzky","description":"A simple, lightweight and pure javascript modal plugin","archived":false,"fork":false,"pushed_at":"2018-01-15T15:39:35.000Z","size":5933,"stargazers_count":12,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T05:51:07.947Z","etag":null,"topics":["javascript","lightweight","modal","modal-dialogs","pure-javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluzky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2015-12-22T13:52:36.000Z","updated_at":"2024-01-03T12:21:17.000Z","dependencies_parsed_at":"2023-03-12T00:15:01.956Z","dependency_job_id":null,"html_url":"https://github.com/bluzky/tiModal","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2FtiModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2FtiModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2FtiModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2FtiModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluzky","download_url":"https://codeload.github.com/bluzky/tiModal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252593020,"owners_count":21773388,"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":["javascript","lightweight","modal","modal-dialogs","pure-javascript"],"created_at":"2024-11-13T15:29:25.020Z","updated_at":"2025-05-05T23:31:20.062Z","avatar_url":"https://github.com/bluzky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TiModal\nTiModal is a\n\n### - lightweight\n\n### - pure javascript\n\n library to create modal dialog.\n\nIt's simple, flexible and easy to customize. You can change source code if you want.\n\n## **[Demo](https://bluzky.github.io/projects/timodal/example.html)**\n## **[Download](https://github.com/bluzky/TiModal/releases/tag/v2.1)**\n\n\n## How to use TiModal\n\n### 1. CSS.\n\n#### Add following CSS rules to your css stylesheet before using TiModal\n```css\n/* REQUIRED CSS */\n.tioverlay {\n  position: fixed;\n  z-index:100;\n  top: 0px;\n  left: 0px;\n  height:100%;\n  width:100%;\n  display: none;\n  text-align: center;\n  overflow-y: auto;\n}\n\n/* CUSTOM CSS*/\n.popup-wrapper {\n  margin: 20px auto;\n  display: inline-block;\n  background: #fff;\n  border-radius: 3px;\n  padding: 30px;\n  text-align: left;\n}\n\n.popup-content-wrapper .close-btn {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  line-height: 25px;\n  z-index: 20;\n  padding: 0;\n}\n```\n\n\n\n### 2. Basic usage\n\n#### **Html code**\n\n```html\n\u003cbutton id=\"show-default-modal\" class=\"btn-default\"\u003eDefault modal\u003c/button\u003e\n\n\u003c!-- template for modal --\u003e\n\u003cscript type=\"text\" id=\"default-modal\"\u003e\n    \u003cdiv class=\"popup-wrapper\"\u003e\n      Hello my friend!\n      \u003cbr/\u003e\n      This is a default modal\n      \u003cbr/\u003e\n      \u003cb\u003eClick on overlay to hide me.\u003c/b\u003e\n    \u003c/div\u003e\n  \u003c/script\u003e\n\n```\n\n\n\n#### Bind button clicked event with a function to show modal\n\n**Pure Javascript**\n\n```javascript\nvar button = document.querySelector('#show-default-modal');\nbutton.addEventListener('click', function(){\n  var html = document.getElementById(\"default-modal\").innerHTML;\n  var modal = tiModal.create(html)\n  .show();\n});\n```\n\n**Using jquery**\n\n```js\n$('#show-default-modal').click(function(){\n  var html = $('#default-modal').html();\n  tiModal.create(html).show();\n});\n```\n\n\n\n### 3. Binding event using code\n\n#### **Html code**\n```html\n\u003cbutton id=\"show-confirm-modal\" class=\"btn-default\"\u003eConfirm modal\u003c/button\u003e\n\n\u003cscript type=\"text\" id=\"confirm-modal\"\u003e\n    \u003cdiv class=\"popup-wrapper\"\u003e\n      \u003cdiv class=\"popup-header\"\u003e Warning \u003c/div\u003e\n      \u003cdiv class=\"popup-content\"\u003e\n        This action cannot be reverted.\n        Do you want to proceed?\n      \u003c/div\u003e\n      \u003cdiv class=\"popup-footer\"\u003e\n        \u003cbutton class=\"btn-success cancel\"\u003eBring me back\u003c/button\u003e\n        \u003cbutton class=\"btn-danger ok\"\u003eDo it!\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/script\u003e\n```\n\n\n\n#### **Javascript**\n\n```javascript\n\n$('#show-confirm-modal').click(function(){\n  var html = $('#confirm-modal').html();\n  tiModal.create(html, {\n    events: {\n      'click .cancel': function(e){\n        this.close();\n      },\n      'click .ok': function(e){\n        this.close();\n        alert('User has been deleted!')\n      }\n    }\n  }).show();\n});\n```\n\n\n\n### 4. API\n\n#### 4.1 Public methods\n\n- Create modal\n\n  `TiModal.create(html, options)`\n\n  **Params**\n\n  - `html`: html template for modal\n  - `options`: see below\n\n  **Return** Modal object\n\n- Hide current modal\n\n  `TiModal.closeCurrent()`\n\n- Hide all modal\n\n  `TiModal.closeAll()`\n\n\n\n#### 4.2 Modal object methods\n\n- `.show()` : show dialog\n- `.hide()` : hide dialog\n- `.dispose()` : destroy dialog and remove from the memory\n\n\n### 5. All possible options\n\n```javascript\nmodal: false | true,\n```\n\n| **option** | **type** | **default** | **description**                          |\n| ---------- | -------- | ----------- | ---------------------------------------- |\n| `modal`    | boolean  | false       | `false`: close modal when click on the overlay   `true`: only close modal when call close modal API |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzky%2Ftimodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluzky%2Ftimodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzky%2Ftimodal/lists"}