{"id":21224074,"url":"https://github.com/kodie/minitaur","last_synced_at":"2025-07-10T14:31:15.599Z","repository":{"id":57298046,"uuid":"422694034","full_name":"kodie/minitaur","owner":"kodie","description":"The ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.","archived":false,"fork":false,"pushed_at":"2023-05-24T16:05:01.000Z","size":254,"stargazers_count":3,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T22:15:13.212Z","etag":null,"topics":["frontend","frontend-development","javascript","modal","modals","no-dependencies","no-jquery","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://minitaur.js.org","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/kodie.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-29T19:40:13.000Z","updated_at":"2023-12-12T14:23:33.000Z","dependencies_parsed_at":"2023-02-06T08:16:21.396Z","dependency_job_id":null,"html_url":"https://github.com/kodie/minitaur","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodie%2Fminitaur","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodie%2Fminitaur/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodie%2Fminitaur/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodie%2Fminitaur/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodie","download_url":"https://codeload.github.com/kodie/minitaur/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225640771,"owners_count":17501018,"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":["frontend","frontend-development","javascript","modal","modals","no-dependencies","no-jquery","vanilla-javascript"],"created_at":"2024-11-20T22:54:56.693Z","updated_at":"2025-07-10T14:31:15.592Z","avatar_url":"https://github.com/kodie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minitaur\n\n[![npm package version](https://img.shields.io/npm/v/minitaur.svg?style=flat-square)](https://www.npmjs.com/package/minitaur)\n[![Travis build status](https://img.shields.io/travis/com/kodie/minitaur.svg?style=flat-square)](https://travis-ci.com/kodie/minitaur)\n[![npm package downloads](https://img.shields.io/npm/dt/minitaur.svg?style=flat-square)](https://www.npmjs.com/package/minitaur)\n[![code style](https://img.shields.io/badge/code_style-standard-yellow.svg?style=flat-square)](https://github.com/standard/standard)\n[![license](https://img.shields.io/github/license/kodie/minitaur.svg?style=flat-square)](license.md)\n\nThe ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.\n\n**WARNING: This project has been deprecated and will no longer recieve support or updates. Feel free to fork the code if you wish to continue using/maintaining it.**\n\n\n## Demo\n\nVisit https://minitaur.js.org\n\n\n## Installation\n\n\n### Manual Download\n\nDownload [dist/minitaur.min.js](dist/minitaur.min.js) and place the following HTML in your page's head element:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/minitaur.min.js\"\u003e\u003c/script\u003e\n```\n\n\n### CDN (Courtesy of [jsDelivr](https://jsdelivr.com))\n\nPlace the following HTML in your page's head element (check to make sure the version in the URL is the version you want):\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/kodie/minitaur@0.3.0/dist/minitaur.min.js\"\u003e\u003c/script\u003e\n```\n\n\n### [NPM](https://npmjs.com)\n\n```\nnpm install minitaur --save\n```\n\n```js\n// ES6\nimport minitaur from 'minitaur'\n\n// CommonJS\nconst minitaur = require('minitaur')\n```\n\n\n### [GPM](https://github.com/itsahappymedium/gpm)\n\n```\ngpm install kodie/minitaur --save\n```\n\n\n### [Bower](https://bower.io)\n\n```\nbower install kodie/minitaur --save\n```\n\n\n## Usage\n\n\n### The `minitaur` Function\n\nInitiates minitaur.\n\n\n#### Parameters\n\nIf the first parameter is set to an object, it will be used as the options parameter and the mount parameter will be set to the option object's `mount` value.\n\n\n##### `mount`\n\nDefault: `'.minitaur, [data-minitaur]'`\n\nThe element(s) to turn into minitaur modals. Optional. Accepts `String`, `NodeList`, `HTMLElement`, or `false`. See the `mount` option for more information.\n\n##### `options`\n\nDefault: *(See `Options` section)*\n\nAn object of options you can set to configure the modal(s). Optional. Accepts `Object`. See the `Options` section for more information.\n\n\n#### Examples\n\n```js\nwindow.addEventListener('load', function () {\n  // Initialize minitaur with default options on all elements with the `minitaur` class or `data-minitaur` attribute\n  minitaur()\n\n  // Mount a different element as a modal\n  minitaur('.modal')\n\n  // Mount a custom element as a modal, and add a class to it\n  minitaur(document.getElementById('my-element'), { class: 'alert' })\n\n  // This does exactly the same as the above\n  minitaur({\n    class: ['alert'],\n    mount: document.getElementById('my-element')\n  })\n\n  // Create a modal without using a pre-existing element, apply some custom styling, have it takeover and be opened, and close it after 5 seconds\n  minitaur({\n    afterOpen: function (modal) {\n      setTimeout(function () {\n        modal.minitaur.close()\n      }, 5000)\n    },\n    content: '\u003cp\u003eHi! I was created out of no where! But you can \u003ca href=\"#\" data-minitaur-close\u003eclose me\u003c/a\u003e if you want.\u003c/p\u003e',\n    mount: false,\n    opened: true,\n    style: {\n      backgroundColor: '#fff',\n      padding: '10px'\n    },\n    takeover: true\n  })\n\n  // Mount an element, but store it in a variable and change it's content after initialization\n  var myModal = minitaur('#alert')\n  myModal.minitaur.set('content', '\u003cspan\u003eThis is an alert!\u003c/span\u003e')\n\n  // Let's change it's class and apply some styling too\n  myModal.minitaur.set({\n    class: 'viewed',\n    style: {\n      color: '#ff0000'\n    }\n  })\n\n  // We can also get it after initialization and control it this way\n  var alsoMyModal = document.getElementById('alert')\n  alsoMyModal.minitaur.close()\n\n  // We can do this as well\n  minitaur.close(document.getElementById('alert'))\n})\n```\n\nView the source of [index.html](index.html) for more examples.\n\n\n#### Options\n\n\n##### `afterClose`\n\nDefault: `null`\n\nA function to run after the modal has been closed. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `afterInit`\n\nDefault: `null`\n\nA function to run after the modal has been initiated. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `afterOpen`\n\nDefault: `null`\n\nA function to run after the modal has been opened. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `anchor`\n\nDefault: `null`\n\nThe element that the modal should base it's size and position on. Accepts a `String` that will be passed to `document.querySelector`, an `HTMLElement`, or an `Object` containing `x` and/or `y` keys set to the before mentioned types to have the modal base it's horizontal and vertical positions on two different elements.\n\nIf this (or either of the `x`/`y` object keys) is set to `'viewport'`, the currently visible viewport will be used, also the modal's position will automatically be updated when the user scrolls the page.\n\nIf this (or either of the `x`/`y` object keys) is set to `null`, it will default to `document.body` unless the modal was opened via a `trigger` in which case it will default to the element that initiated the triggered event.\n\n\n##### `backdropClass`\n\nDefault: `'minitaur-backdrop'`\n\nThe class that is applied to the backdrop of a modal. Accepts a `String`. This is only used if the modal's `takeover` option is set to `true`.\n\n\n##### `backdropClosingStyle`\n\nDefault: `null`\n\nThe style to apply to the backdrop of the modal while it is being closed. Accepts an `Object` of keys and values that will be applied to the `style` property of the backdrop element or `null` to not apply any styling. This is only used if the modal's `takeover` option is set to `true`.\n\n\n##### `backdropOpeningStyle`\n\nDefault: `null`\n\nThe style to apply to the backdrop of the modal while it is being opened. Accepts an `Object` of keys and values that will be applied to the `style` property of the backdrop element or `null` to not apply any styling. This is only used if the modal's `takeover` option is set to `true`.\n\n\n##### `backdropStyle`\n\nDefault: `{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }`\n\n\nThe style to apply to the backdrop of the modal. Accepts an `Object` of keys and values that will be applied to the `style` property of the backdrop element or `null` to not apply any styling. This is only used if the modal's `takeover` option is set to `true`.\n\n\n##### `beforeClose`\n\nDefault: `null`\n\nA function to run before the modal has been closed. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `beforeInit`\n\nDefault: `null`\n\nA function to run before the modal has been initiated. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `beforeOpen`\n\nDefault: `null`\n\nA function to run before the modal has been opened. Receives the modal instance as it's first parameter. Accepts a `Function`.\n\n\n##### `breakpoints`\n\nDefault: `null`\n\nAn `Object` of options that are set depending on the browser window's width. Accepts an object containing numeric strings as keys (the browser width breakpoint in pixels) set to objects containing keys of other options to be set if the browser's width matches or exceeds the breakpoint. Accepts an `Object`.\n\nExample:\n\n```js\nminitaur({\n  breakpoints: {\n    '600': {\n      content: 'Your browser window is at least 600 pixels wide'\n    },\n    '1200': {\n      content: 'Your browser window is at least 1200 pixels wide'\n    }\n  }\n})\n```\n\n\n##### `class`\n\nDefault: `'minitaur'`\n\nA class or classes to apply to the modal. Accepts a `String` or an `Array` of `String`s.\n\n\n##### `closeClass`\n\nDefault: `'closed'`\n\nThe class that is applied to the modal after it has been closed. Accepts a `String`.\n\n\n##### `closeDuration`\n\nDefault: `0`\n\nThe number of milliseconds the modal should take to close. Useful for applying animations to the modal close event. Accepts a `Number`.\n\n\n##### `closingClass`\n\nDefault: `'closing'`\n\nThe class that is applied to the modal while it is closing. Accepts a `String`.\n\n\n##### `closingStyle`\n\nDefault: `null`\n\nThe style to apply to the modal while it is being closed. Accepts an `Object` of keys and values that will be applied to the `style` property of the modal or `null` to not apply any styling.\n\n\n##### `closeOnFocusOut`\n\nDefault: `true`\n\nIf set to `true`, the modal will be closed if any element outside of the modal is focused on or clicked. Accepts a `Boolean`.\n\n\n##### `closeStyle`\n\nDefault: `{ display: 'none', visibility: 'hidden' }`\n\nThe style to apply to the modal after it has been closed. Accepts an `Object` of keys and values that will be applied to the `style` property of the modal or `null` to not apply any styling.\n\n\n##### `content`\n\nDefault: `null`\n\nThe HTML content to set for the modal. Can be left set to `null` if mounting a pre-existing element that has content already. Accepts a `String` or a `Function` that is passed the modal instance as it's first parameter and returns a `String`.\n\nAny instances of `{parameter}` will be replaced with it's value in the `parameters` option.\n\n\n##### `id`\n\nDefault: `null`\n\nThe id to set for the modal. If left set to `null` it will only set the id if one isn't already set on the mounted element, in which case the id will be set to `minitaur-[modalCount]`. Accepts a `String`.\n\nThis should really only be used when the `mount` option is set to `false`.\n\n\n##### `mount`\n\nDefault: `'.minitaur, [data-minitaur]'`\n\nAn element to mount as the modal. Accepts a string that will be passed to `document.querySelector`, a `NodeList`, an `HTMLElement`, or `false` to create a new element.\n\n\n##### `opened`\n\nDefault: `false`\n\nSet to `true` to have the modal be opened after initialization. Accepts a `Boolean`.\n\n\n##### `openClass`\n\nDefault: `'opened'`\n\nThe class that is added to the modal after it has been opened. Accepts a `String`.\n\n\n##### `openDuration`\n\nDefault: `0`\n\nThe number of milliseconds the modal should take to open. Useful for applying animations to the modal open event. Accepts a `Number`.\n\n\n##### `openingClass`\n\nDefault: `'opening'`\n\nThe class that is applied to the modal while it is opening. Accepts a `String`.\n\n\n##### `openingStyle`\n\nDefault: `{ display: 'block', visibility: 'visible' }`\n\nThe style to apply to the modal while it is being opened. Accepts an `Object` of keys and values that will be applied to the `style` property of the modal or `null` to not apply any styling.\n\n\n##### `openStyle`\n\nDefault: `null`\n\nThe style to apply to the modal after it has been opened. Accepts an `Object` of keys and values that will be applied to the `style` property of the modal or `null` to not apply any styling.\n\n\n##### `overrides`\n\nDefault: `null`\n\nAn `Object` of options that are set for specific minitaur instances. Accepts an object containing strings as keys (a selector string that is passed to modal.[matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)()) set to objects containing keys of other options to be set if the modal matches the selector. Accepts an `Object`.\n\nExample:\n\n```js\nminitaur({\n  overrides: {\n    '.my-special-modal': {\n      afterOpen: function () {\n        alert('You opened my special modal.')\n      }\n    }\n  }\n})\n```\n\n\n##### `parameters`\n\nDefault: `null`\n\nAn `Object` containing keys that instances of `{key}` in the modal's HTML content should be replaced with it's value. Accepts an `Object` or `null` to not set any parameters.\n\n\n##### `position`\n\nDefault: `'middle'`\n\nPossible horizontal position values: `'left'`, `'inner-left'`, `'middle'`, `'inner-right'`, `'right'`\n\nPossible vertical position values: `'top'`, `'inner-top'`, `'middle'`, `'inner-bottom'`, `'bottom'`\n\nThe position of the modal based on the `anchor` element's size/position. Accepts a `String` with a single position value that will be used for both the horizontal and vertical position (ex. `middle`), a `String` with the vertical position first and horizontal position second separated by a space (ex. `top right`), or an `Object` containing `x` and/or `y` keys with their values set to their respective position value (ex. `{ x: 'right', y: 'top' }`).\n\nThis option also accepts a `Number`, or a numeric `String` to manually set the pixel position based on the `anchor` element's size/position. A numeric `String` that ends with a percentage symbol (`%`) can also be used to set the position based on a percentage of the `anchor` element's size/position.\n\nThe modal will automatically reposition itself anytime the browser window is resized.\n\n\n##### `respectAnchorSpacing`\n\nDefault: `false`\n\nSet to `true` to have the anchor element's margin/padding calculated when setting the modal position. Accepts a `Boolean`.\n\nThe modal's own margin/padding is always respected.\n\n\n##### `saveOptions`\n\nDefault: `true`\n\nSet to `false` to have options passed to the `minitaur.open` and `minitaur.close` functions not save, making them only relevant that single instance of opening/closing the modal.\n\n\n##### `saveParameters`\n\nDefault: `true`\n\nSet to `false` to have `options.parameters` passed to the `minitaur.open` and `minitaur.close` functions not save, making them only relevant that single instance of opening/closing the modal.\n\n\n##### `stayInBounds`\n\nDefault: `true`\n\nIf set to `true`, the modal will automatically reposition itself if the calculated position makes it go outside of `document.body` or out of the bounds of the `anchor` element (if one of the `position` option keys are set to `'inner-left'`, `'inner-right'`, `'inner-top'`, or `'inner-bottom'`, otherwise it's supposed to be out of the bounds of the anchor element), or if it overlaps the `anchor` element (if the `anchor` element is not `document.body` and one of the `position` option keys are set to `'left'`, `'right'`, `'top'`, or `'bottom'` otherwise it's supposed to overlap). Accepts a `Boolean`.\n\n\n##### `style`\n\nDefault: `null`\n\nThe style to apply to the modal. Accepts an `Object` of keys and values that will be applied to the `style` property of the modal or `null` to not apply any styling.\n\n\n##### `takeover`\n\nDefault: `false`\n\nSet to `true` to have a backdrop added behind the modal and disable page scroll while the modal is open. Accepts a `Boolean`.\n\nA modal with this option enabled will have it's `anchor` option locked to `'viewport'` and will have the `data-minitaur-taking-over` data attribute applied to it while it is open.\n\nThe backdrop element will also get the `closingClass`, `openClass`, and `openingClass` classes applied just like the modal. Additionally, it's id will be set to `[modal-id]-backdrop` and will get the `data-minitaur-backdrop=\"#[modal-id]\"` data attribute applied to it.\n\nThe backdrop element will get it's `zIndex` style property set to `99998` and the modal's set to `99999` unless either one of these are overwritten by any style options.\n\nAlso, when a modal with this option enabled is opened, any other modals with this option enabled will be closed.\n\n\n##### `template`\n\nDefault: `null`\n\nThe HTML to use as a template for the modal content. Any instances of `{minitaur-content}` will be replaced with the modal's content. Parameters from the `parameters` option can be used here too. Accepts a `String` or `Function`.\n\nExample:\n\n```js\nminitaur('.minitaur-modal', {\n  template: '{minitaur-content}\u003cbutton type=\"button\" class=\"btn btn-primary\" data-minitaur-close\u003eClose Me\u003c/button\u003e'\n})\n```\n\nYou can also define templates to use later by setting them in the `minitaur.templates` object and setting the `template` option to it's key rather than the HTML content.\n\nTemplates can be a function that is passed the modal as it's only parameter and returns a string.\n\nExample:\n\n```js\nminitaur.templates.myModal = '{minitaur-content}\u003cbutton type=\"button\" class=\"btn btn-primary\" data-minitaur-close\u003eClose Me\u003c/button\u003e'\n\nminitaur('.minitaur-modal', {\n  template: 'myModal'\n})\n```\n\n```html\n\u003cdiv class=\"minitaur-modal\"\u003e\n  \u003cp\u003eHi, I'm a minitaur modal. :)\u003c/p\u003e\n\u003c/div\u003e\n```\n\nWill result in:\n\n```html\n\u003cdiv class=\"minitaur-modal minitaur minitaur-template-myModal\"\u003e\n  \u003cdiv class=\"minitaur-content\"\u003e\n    \u003cp\u003eHi, I'm a minitaur modal. :)\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cbutton type=\"button\" class=\"btn btn-primary\" data-minitaur-close\u003eClose Me\u003c/button\u003e\n\u003c/div\u003e\n```\n\n*Tip: When using templates, your content gets wrapped in a div with the `minitaur-content` class. To use something other than a div, wrap the `{minitaur-content}` in an element of your choice with the `minitaur-content` class when setting the template content in the `minitaur.templates` object. For example: `\u003cspan class=\"minitaur-content\"\u003e{minitaur-content}\u003c/span\u003e`*\n\n\n##### `triggers`\n\nDefault: `[]`\n\nPossible action values: `'close'`, `'open'`, `'toggle'`\n\nElements to add event listeners to that perform certain actions on the modal. Accepts a `String`/`Array` of `String`s that will be passed to `document.querySelector`, or an `Object`/`Array` of `Object`s containing at the very least an `elements` key set to the before mentioned types. The `action` key can be set to one of the above action values (defaults to `'toggle'`), and/or an `events` key can be set to a `String`/`Array` of `String`s defining the type of event listener that should be used (defaults to `'click'`).\n\nExamples:\n\n```js\nminitaur({\n  triggers: '.toggles-modal-when-clicked'\n})\n\nminitaur({\n  triggers: [\n    '.toggles-modal-when-clicked',\n    '.also-toggles-modal-when-clicked',\n    {\n      action: 'open', // Defaults to \"toggle\"\n      elements: '.opens-modal-when-hovered',\n      events: 'mouseover' // Defaults to \"click\"\n    },\n    {\n      action: 'close',\n      elements: [\n        '.closes-modal-when-unhovered-or-clicked',\n        '.also-closes-modal-when-unhovered-or-clicked'\n      ],\n      events: [\n        'mouseout',\n        'click'\n      ]\n    }\n  ]\n})\n```\n\n\n#### Defaults Options\n\n```js\n// All default options\nminitaur({\n  afterClose: null,\n  afterInit: null,\n  afterOpen: null,\n  anchor: null,\n  backdropClass: 'minitaur-backdrop',\n  backdropClosingStyle: null,\n  backdropOpeningStyle: null,\n  backdropStyle: {\n    backgroundColor: 'rgba(0, 0, 0, 0.5)'\n  },\n  beforeClose: null,\n  beforeInit: null,\n  beforeOpen: null,\n  breakpoints: null,\n  class: 'minitaur',\n  closeClass: 'closed',\n  closeDuration: 0,\n  closingClass: 'closing',\n  closingStyle: null,\n  closeOnFocusOut: true,\n  closeStyle: {\n    display: 'none',\n    visibility: 'hidden'\n  },\n  content: null,\n  id: null,\n  mount: '.minitaur, [data-minitaur]',\n  opened: false,\n  openClass: 'opened',\n  openDuration: 0,\n  openingClass: 'opening',\n  openingStyle: {\n    display: 'block',\n    visibility: 'visible'\n  },\n  openStyle: null,\n  overrides: null,\n  parameters: null,\n  position: 'middle',\n  respectAnchorSpacing: false,\n  saveOptions: true,\n  saveParameters: true,\n  stayInBounds: true,\n  style: null,\n  takeover: false,\n  template: null,\n  triggers: []\n})\n```\n\n\n### Modal Data Attributes\n\nMost options above can be set by setting `data-minitaur-*` attributes on a pre-existing element that will be used in the `mount` option (ex: `data-minitaur-anchor=\"#my-div\"`, `data-minitaur-respect-anchor-spacing=\"true\"`). You can also define `breakpoints` options as well (ex: `data-minitaur-breakpoints-768-position-x=\"right\"`).\n\n\n#### Example\n\n```html\n\u003cdiv id=\"my-modal\" class=\"minitaur\" data-minitaur-anchor=\"#my-div\" data-minitaur-respect-anchor-spacing=\"true\" data-minitaur-breakpoints-768-position-x=\"right\"\u003e\n  \u003cp\u003eHi, I'm a minitaur modal.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\n### Trigger Data Attributes\n\nTrigger elements can be defined (in addition to using the `triggers` option) using the `data-minitaur-close`, `data-minitaur-open`, or `data-minitaur-toggle` data attributes set to a selector for the modal (ex. `data-minitaur-open=\"#my-modal\"`).\n\nThe value can be omitted from the trigger element if it's inside of a modal (ex. An element inside of a modal with the `data-minitaur-close` attribute not set to anything would close the modal that it is inside of).\n\nAdditionally, any modal data attributes as described in the above section can also be applied to trigger elements to set those options on the modal when the trigger element is triggered.\n\n\n#### Example\n\n```html\n\u003cdiv id=\"my-modal\" class=\"minitaur\" data-minitaur-respect-anchor-spacing=\"true\" data-minitaur-breakpoints-768-position-x=\"right\"\u003e\n  \u003cp\u003eHi, I'm a minitaur modal. You can \u003ca href=\"#\" data-minitaur-close\u003eclose me\u003c/a\u003e if you want.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbutton type=\"button\" data-minitaur-toggle=\"#my-modal\" data-minitaur-anchor=\"#my-div\"\u003eToggle Modal\u003c/button\u003e\n```\n\n\n### Global Methods\n\nThe global `minitaur` object has the following methods that can be used:\n\n#### `close`\n\nCloses a modal/modals. Accepts a `String` that will be passed to `document.querySelector`, a `NodeList` or an `HTMLElement` as the first parameter to specify the modal to close and optionally an `Object` containing options to set as the second parameter.\n\n\n#### `kill`\n\nDeinitializes a modal/modals. Accepts a `String` that will be passed to `document.querySelector`, a `NodeList`, or an `HTMLElement` as the first parameter to specify the modal to deinitialize and optionally a `Boolean` to decide to put the original element back the way it was before initialization as the second parameter (defaults to `true`).\n\n\n#### `open`\n\nOpens a modal/modals. Accepts a `String` that will be passed to `document.querySelector`, a `NodeList`, or an `HTMLElement` as the first parameter to specify the modal to open and optionally an `Object` containing options to set as the second parameter.\n\n\n#### `set`\n\nSets options for a modal. Accepts a `String` that will be passed to `document.querySelector`, a `NodeList`, or an `HTMLElement` as the first parameter to specify the modal to set options for and an `Object` containing options to set as the second parameter. The second parameter also accepts a `String` set to an option key, in that case a third parameter should be defined to set that option's value.\n\n\n#### `toggle`\n\nToggles a modal/modals' open state. Accepts a `String` that will be passed to `document.querySelector`, a `NodeList`, or an `HTMLElement` as the first parameter to specify the modal to open/close and optionally an `Object` containing options to set as the second parameter.\n\n\n#### Examples\n\n```js\nminitaur.close('#my-modal')\n\nminitaur.kill('#my-modal', false)\n\nminitaur.open('#my-modal', {\n  afterOpen: function (modal) {\n    console.log('My modal was opened')\n  }\n})\n\nminitaur.set('#my-modal', {\n  afterClose: function (modal) {\n    console.log('My modal was closed')\n  }\n})\n\nminitaur.toggle('#my-modal')\n```\n\n\n### Modal Methods\n\nThe `minitaur` property is added to the modal with the following methods that can be used:\n\n\n#### `close`\n\nCloses the modal. Optionally accepts an `Object` containing options to set as the first parameter.\n\n\n#### `kill`\n\nDeinitializes the modal. Optionally accepts a `Boolean` to decide to put the original element back the way it was before initialization as the first parameter (defaults to `true`).\n\n\n#### `open`\n\nOpens the modal. Optionally accepts an `Object` containing options to set as the first parameter.\n\n\n#### `set`\n\nSets options for the modal. Accepts an `Object` containing options to set as the first parameter. The first parameter also accepts a `String` set to an option key, in that case a second parameter should be defined to set that option's value.\n\n\n#### `toggle`\n\nToggles the modal's open state. Optionally accepts an `Object` containing options to set as the first parameter.\n\n\n#### Examples\n\n```js\nmodal.minitaur.close()\n\nmodal.minitaur.kill(false)\n\nmodal.minitaur.open({\n  afterOpen: function (modal) {\n    console.log('My modal was opened')\n  }\n})\n\nmodal.minitaur.set({\n  afterClose: function (modal) {\n    console.log('My modal was closed')\n  }\n})\n\nmodal.minitaur.toggle()\n```\n\n\n### Modal Properties\n\nThe `minitaur` property is added to the modal with the following properties that can be used to detect the modal's current state:\n\n\n#### `isOpen`\n\nIs set to `true` if the modal is currently open, otherwise `false`.\n\n\n#### Example\n\n```js\nfunction checkIfMyModalIsOpen(modal) {\n  if (modal.minitaur.isOpen) {\n    console.log('My modal is open')\n  } else {\n    console.log('My modal is not open')\n  }\n}\n```\n\n\n### Modal Events\n\nThe following events are triggered on a modal when an action is performed:\n\n\n#### `close`\n\nFires when the modal is closed.\n\n\n#### `open`\n\nFires when the modal is opened.\n\n\n#### Examples\n\n```js\nmodal.addEventListener('open', function (e) {\n  console.log('My modal was opened')\n})\n\nmodal.addEventListener('close', function (e) {\n  console.log('My modal was closed')\n})\n```\n\n\n### Styling\n\nminitaur doesn't come with any default styling (except for the `backdropStyle`, `closeStyle`, and `openingStyle` option defaults) and doesn't require you to embed any CSS. However the modals can be very easily styled either by using CSS or by setting any of the style options available.\n\n\n#### Examples\n\n##### Basic Styling\n\n```css\n.minitaur {\n  background-color: #fff;\n  border: 1px solid #000;\n  border-radius: 5px;\n  padding: 10px;\n  text-align: center;\n}\n```\n\n\n##### Animations\n\n```js\nminitaur({\n  closeDuration: 250\n})\n```\n\n```css\n.minitaur {\n  transition: opacity .25s ease, left .25s ease, top .25s ease;\n}\n\n.minitaur[data-minitaur-taking-over],\n.minitaur-backdrop {\n  transition: opacity .25s ease;\n}\n\n.minitaur.closing,\n.minitaur.opening,\n.minitaur-backdrop.closing,\n.minitaur-backdrop.opening {\n  opacity: 0\n}\n```\n\n\n## Related\n\n - [filebokz](https://github.com/kodie/filebokz) - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.\n\n - [growfield](https://github.com/kodie/growfield) - A tiny, dependency-free JavaScript module for making textarea elements grow with their content.\n\n - [hashjump](https://github.com/kodie/hashjump) - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.\n\n - [kloner](https://github.com/kodie/kloner) - A tiny, dependency-free JavaScript module for cloning/repeating elements.\n\n - [kolorfield](https://github.com/kodie/kolorfield) - A tiny, dependency-free, color input field helper that utilizes the native color picker.\n\n - [peekfield](https://github.com/kodie/peekfield) - A dependency-free, easy to use, JavaScript plugin for hiding and showing fields.\n\n\n## License\n\nMIT. See the [license file](license.md) for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodie%2Fminitaur","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkodie%2Fminitaur","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodie%2Fminitaur/lists"}