{"id":21916876,"url":"https://github.com/zenoo/quickmodal","last_synced_at":"2026-02-08T19:03:02.723Z","repository":{"id":26890520,"uuid":"111783779","full_name":"Zenoo/quickModal","owner":"Zenoo","description":"Quick Modal Generator","archived":false,"fork":false,"pushed_at":"2025-01-07T11:52:34.000Z","size":910,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-23T19:08:56.000Z","etag":null,"topics":["modal","plugin"],"latest_commit_sha":null,"homepage":"https://zenoo.github.io/quickModal/","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/Zenoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2017-11-23T08:34:01.000Z","updated_at":"2025-01-07T11:52:25.000Z","dependencies_parsed_at":"2025-01-23T19:08:58.164Z","dependency_job_id":"2725ef22-2b5e-4dd2-a24a-f218ec0f260b","html_url":"https://github.com/Zenoo/quickModal","commit_stats":{"total_commits":166,"total_committers":3,"mean_commits":"55.333333333333336","dds":0.5301204819277108,"last_synced_commit":"f560dc0937d72e2284c817e11434c26d5372e03c"},"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FquickModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FquickModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FquickModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2FquickModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zenoo","download_url":"https://codeload.github.com/Zenoo/quickModal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235828182,"owners_count":19051398,"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":["modal","plugin"],"created_at":"2024-11-28T19:21:20.020Z","updated_at":"2025-10-09T14:30:22.259Z","avatar_url":"https://github.com/Zenoo.png","language":"JavaScript","readme":"# quickModal\n\nCreate a custom modal quickly.\n\n### Doc\n\n* **Installation**\n\nSimply import QuickModal into your HTML.\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/quick-modal@2.2.2/quickModal.min.css\"\u003e\n\u003cscript src=\"https://unpkg.com/quick-modal@2.2.2/quickModal.min.js\"\u003e\u003c/script\u003e\t\n```\n* **How to use**\n\nInitialize your modal:\n```\n// Without jQuery\nconst modal = new QuickModal(options);\n\n// Shorthand for a simple title + body\nconst modal = new QuickModal('Your title', 'Your message');\n\n// With jQuery\n$(document).quickModal(options);\n```\n* **Options**\n```\n{\n  document: window.document,        // Document in which the QuickModal should be opened into, window.document is used by default\n  darkenBackground: true,           // Darken your page background when the modal is active\n  isForm: true,                     // Your modal contains a form\n  keepHidden: false,                // Hide the modal instead of destroying it on close\n  closeText: 'OK',                  // Close button text\n  classes: [],                      // Your modal classes (String[])\n  attributes: {                     // Your modal additional attributes (attribute name : attribute value)\n    'data-modal': 'true'\n  },\n  form: {                           // If isForm is set to true, this object will define your form properties\n    action: 'path/to/your/form',    // Form ACTION attribute\n    method: 'POST',                 // Form METHOD attribute\n    id: 'formId',                   // Form ID\n    classes: [],                    // Form classes (String[])\n    submit: 'OK'                    // Form Submit text\n  },\n  header: '\u003cdiv\u003eCustom HTML\u003c/div\u003e', // Modal header content\n  body: [                           // Array containing all your modal lines\n    {\n      type: 'text',                 // Possible values [\"text\",\"form\"] If set to 'text', creates a simple HTML node\n      text: 'I am Text !',          // Your line text\n      tag: 'h3',                    // Your line tag\n      id: 'myId',                   // Your line id\n      classes: [                    // Your line classes\n        'class1',\n        'class2'\n      ],\n      attributes: {                 // Your line additionnal attributes\n        'data-modal': 'true'\n      },\n\t  children: [                   // List of children elements\n        {\n          type: 'text',\n          text: 'I am Text !',\n          tag: 'h3',\n          id: 'myId',\n          classes: [\n            'class1',\n            'class2'\n          ],\n          attributes: {\n            'data-modal': 'true'\n          },\n\t      children: [ ... ]\n        }\n\t  ]\n    },\n    {\n      type: 'form',                 // Possible values [\"text\",\"form\"] If set to 'form', create a new HTML Node with a label and your tag.\n      label: 'I am Input !',        // Your input label\n      inputType: 'text',            // If tag == 'input', set this to set your input TYPE attribute\n      placeholder: 'Placeholder',   // If tag == 'input' or 'textarea', set this to set your input PLACEHOLDER attribute\n      name: 'formText',             // Your input NAME attribute\n      value: 'currentValue',        // Your input VALUE attribute\n      tag: 'input',                 // Your input tag\n      id: 'myInput',                // Your input ID\n      classes: [                    // Your input classes\n        'class1',\n        'class2'\n      ]\n    },\n    {\n      type: 'form',\n      label: 'I am Select !',\n      name: 'formSelect',\n      tag: 'select',\n      id: 'mySelect',\n      classes: [\n        'class1',\n        'class2'\n      ],\n      options: [                    // If tag == 'select', contains your select options\n        {\n          value: 'val', \n          text: 'Option 1', \n          selected: false,\n          attributes: {             //Add attributes to your options\n            'data-modal': 'true'\n          }\n        },\n        {\n          value: 'val2', \n          text: 'Option 2', \n          selected: true\n        },\n      ]\n    }\n  ],\n  footer: [                          // Contains an array of links displayed at the bottom of your modal\n    {\n      text: 'I am Link !',           // Your link text\n      href: 'path/to/link',          // Your link Href\n      id: 'myLink',                  // Your link ID\n      classes: [                     // Your link classes\n        'class1',\n        'class2'\n      ]\n    }\n  ],\n  afterOpen: function(modal) {},     // Callback triggered after the modal opens. Parameter is the modal NODE.\n  beforeClose: function(modal) {},   // Callback triggered right before the modal closes. Parameter is the modal NODE.\n  onSubmit: function(event, form) {} // Callback triggered when the form is submitted. Parameter are the event and the form NODE.\n}\n```\n\n* **Methods**\n```\nmodal.open(); \t\t// Opens the modal (If previously closed)\nmodal.close(); \t\t// Closes the modal\nmodal.destroy(); \t// Destroys the modal\n```\n\n* **Example**\n\nSee this [JSFiddle](https://jsfiddle.net/Zenoo0/w4p57wmh/) for a working example\n\n## Authors\n\n* **Zenoo** - *Initial work* - [Zenoo.fr](http://zenoo.fr)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fquickmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzenoo%2Fquickmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fquickmodal/lists"}