{"id":22602463,"url":"https://github.com/tomloprod/tomloprodmodal","last_synced_at":"2025-04-11T02:51:59.349Z","repository":{"id":57377872,"uuid":"67418779","full_name":"tomloprod/tomloprodModal","owner":"tomloprod","description":"tomloprodModal is a configurable pure javascript library to create responsive and minimalist modal windows with no dependencies.","archived":false,"fork":false,"pushed_at":"2016-12-24T10:10:12.000Z","size":25927,"stargazers_count":18,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T18:55:37.698Z","etag":null,"topics":["javascript-library","minimalist","modal-windows","nominee-innovation-award","responsive"],"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/tomloprod.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":"2016-09-05T12:26:15.000Z","updated_at":"2024-03-21T08:56:16.000Z","dependencies_parsed_at":"2022-08-31T00:31:04.490Z","dependency_job_id":null,"html_url":"https://github.com/tomloprod/tomloprodModal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomloprod%2FtomloprodModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomloprod%2FtomloprodModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomloprod%2FtomloprodModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomloprod%2FtomloprodModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomloprod","download_url":"https://codeload.github.com/tomloprod/tomloprodModal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248333127,"owners_count":21086193,"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-library","minimalist","modal-windows","nominee-innovation-award","responsive"],"created_at":"2024-12-08T12:21:10.463Z","updated_at":"2025-04-11T02:51:59.312Z","avatar_url":"https://github.com/tomloprod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tomloprodModal [![Release](https://img.shields.io/github/release/tomloprod/tomloprodModal.svg)](https://github.com/tomloprod/tomloprodModal) [![License](https://img.shields.io/github/license/tomloprod/tomloprodModal.svg)](http://www.opensource.org/licenses/mit-license.php)  [![Build Status](https://travis-ci.org/tomloprod/tomloprodModal.svg?branch=master)](https://travis-ci.org/tomloprod/tomloprodModal) [![npm version](https://badge.fury.io/js/tomloprodModal.svg)](https://badge.fury.io/js/tomloprodModal)[![Bower version](https://badge.fury.io/bo/tomloprodModal.svg)](http://badge.fury.io/bo/tomloprodModal)\r\n\r\n\u003cbr\u003e\r\n\r\n**tomloprodModal** is a simple and configurable javascript library to create responsive and minimalist modal windows with no dependencies.\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/tomloprod/tomloprodModal/blob/master/tomloprodModal-test.gif\"/\u003e\r\n\u003c/p\u003e\r\n\r\n**DEMO:** http://codepen.io/tomloprod/pen/kkYxWY\r\n\r\n\u003cbr\u003e\r\n\r\n### HTML \u0026 CSS Classes\r\n---\r\n\r\n* `tm-effect`: If has this class shows fade effects on modal windows and scale effect on main container (*if exist*).\r\n* `tm-draggable`: Defines if the modal window can be dragged.\r\n* `tm-emptyOnClose`: When has this CSS class, the content of this element (*input or tag*) will be cleared.\r\n* `tm-trigger`: When an element has this CSS class, this element will be used for open the modal window indicated by his `data-tm-modal` attribute.\r\n\r\n\r\n\r\n\r\n\r\nExample of modal window:\r\n\r\n````html\r\n\u003cdiv \r\n\tclass=\"tm-modal \r\n\ttm-effect tm-draggable\" \r\n\tdata-tm-bgcolor = \"#3498db\"\r\n\tdata-tm-textcolor = \"white\"\r\n\tid=\"logInPopUp\"\u003e\r\n\t\r\n\t\u003cdiv class=\"tm-wrapper\"\u003e\r\n\t\t\u003cdiv class=\"tm-title\"\u003e\r\n\t\t\t\u003cspan class=\"tm-XButton tm-closeButton\"\u003e\u003c/span\u003e  \r\n\t\t\t\u003ch3 class=\"tm-title-text\"\u003eLogin\u003c/h3\u003e \r\n\t\t\u003c/div\u003e\r\n\t\t\u003cdiv class=\"tm-content\"\u003e\r\n\t\t\t\u003cform style=\"text-align:center;\"\u003e\r\n\t\t\t\t\u003cp\u003e\r\n\t\t\t\t\t\u003cinput class=\"tm-emptyOnClose\" placeholder=\"User\" required=\"\" type=\"text\"\u003e\r\n\t\t\t\t\u003c/p\u003e\r\n\t\t\t\t\u003cp\u003e\r\n\t\t\t\t\t\u003cinput class=\"tm-emptyOnClose\" placeholder=\"Password\" required=\"\" type=\"password\"\u003e\r\n\t\t\t\t\u003c/p\u003e\r\n\t\t\t\t\u003cp\u003e\r\n\t\t\t\t\t\u003cinput id=\"remember\" name=\"remember\" type=\"checkbox\" value=\"1\"\u003e\r\n\t\t\t\t\t\u003clabel for=\"remember\"\u003eRemember me\u003c/label\u003e\r\n\t\t\t\t\u003c/p\u003e\r\n\t\t\t\t\u003cp\u003e\r\n\t\t\t\t\t\u003cinput value=\"Log in\" type=\"submit\"\u003e\r\n\t\t\t\t\u003c/p\u003e\r\n\t\t\t\u003c/form\u003e\r\n\t\t\u003c/div\u003e\r\n\t\u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"myMainContainer\"\u003e Lorem ipsum... \u003c/div\u003e\r\n\r\n````\r\n\u003cbr\u003e\r\n\r\n### Initialization\r\n---\r\n\r\n````javascript\r\nTomloprodModal.start({\r\n    closeOut: true,\r\n    showMessages: true,\r\n    bgColor: \"#FFFFFF\",\r\n    textColor: \"#333333\"\r\n});\r\n````\r\n\r\n\u003cbr\u003e\r\n\r\n### General Config Parameters\r\n---\r\n\r\n* `idMainContainer`: Used to display an scale animation when the modal window opens. (Dynamically add the `tm-MainContainer` class to the element)\r\n* `draggable`: When `true`, all the modal window with the CSS class `tm-draggable` can be dragged. @default `true`\r\n* `bgColor`: Defines modal background color. @default `#5c7d98`\r\n* `overlayColor`: Defines overlay color. @default `rgba(0,0,0,0.8)`\r\n* `textColor`: Defines text and X button color. @default `#FFFFFF`\r\n* `closeOnOverlay`: Enables or disables closing the modal window by clicking the overlay. @default `true`\r\n* `showMessages`: Enables or disables de log messages. @default `false`\r\n* `removeOverlay`: When `true`, remove the overlay if exist. @default `false`\r\n* `closeOnEsc`: Enables or disables pressing the escape key to close the currently open modal. @default `true`\r\n* `borderRadius`: Assign a border-radius to the modal windows. @example `1em` @default `0`\r\n\r\n\u003cbr\u003e\r\n\r\n### Individual Config Parameters 1: *data attributes*\r\n---\r\n\r\n* `data-tm-title`: Will replace the title of the element with `tm-title-text` class.\r\n* `data-tm-content`: Will replace the content of the element with `tm-content` class.\r\n* `data-tm-bgcolor`: Will change the background color by the indicated value for the modal window that has this data attribute. @example `#e74c3c`\r\n* `data-tm-textcolor`: Will change the text color by the indicated value for the modal window that has this data attribute. @example `#FFFFFF`\r\n* `data-tm-closetimer`: Will close the modal window when the milliseconds pass. @example `1000`\r\n\r\nExample of modal window with individual data attributes:\r\n\r\n````html\r\n\u003cdiv \r\n    data-tm-title=\"tomloprodModal 1\" \r\n    data-tm-bgcolor = \"#e74c3c\"\r\n    data-tm-textcolor = \"white\"\r\n    data-tm-closetimer=\"3000\"\r\n    data-tm-content=\"My background color is red! :-) \u003cp\u003e\u003cb\u003eAnd I will self-destruct in 3 seconds\u003c/b\u003e\" \r\n    class=\"tm-modal tm-effect tm-draggable\" \r\n    id=\"testModal1\"\u003e\r\n    \r\n    \u003cdiv class=\"tm-wrapper\"\u003e\r\n        \u003cdiv class=\"tm-title\"\u003e\r\n            \u003cspan class=\"tm-XButton tm-closeButton\"\u003e\u003c/span\u003e  \r\n            \u003ch3 class=\"tm-title-text\"\u003e \u003c/h3\u003e \r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"tm-content\"\u003e \u003c/div\u003e\r\n    \u003c/div\u003e\r\n    \r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"myMainContainer\"\u003e Lorem ipsum... \u003c/div\u003e\r\n````\r\n\u003cbr\u003e\r\n\r\n\r\n### Individual Config Parameters 2: *params*\r\n---\r\n\r\n* `title`: Will replace the title of the element with the value of `title` param.\r\n* `content`: Will replace the content of the elementwith the value of `title` param.\r\n* `bgColor`: Will change the background color by the indicated value for the indicated modal window @example `#e74c3c`\r\n* `textColor`: Will change the text color by the indicated value for the indicated modal window. @example `#FFFFFF`\r\n* `closeTimer`: Will close the modal window when the indicated milliseconds pass. @example `1000`\r\n\r\nExample of modal window with individual parameters:\r\n\r\n````javascript\r\nTomloprodModal.openModal(\"testModal\", {\r\n    bgColor: \"#FFFFFF\",\r\n    textColor: \"#333333\",\r\n\ttitle: \"Hi!\",\r\n    content: \"Nothing to say\",\r\n\tcloseTimer: 1000\r\n});\r\n````\r\n\u003cbr\u003e\r\n\r\n### Miscellaneous\r\n---\r\n\r\n````javascript\r\n\r\n//////////// Create new modal with indicated params (without HTML)\r\nTomloprodModal.create({\r\n    bgColor: \"#FFFFFF\",\r\n    textColor: \"#333333\",\r\n\ttitle: \"Hi!\",\r\n    content: \"Nothing to say\",\r\n\tcloseTimer: 1000\r\n});\r\n\r\n//////////// Stop operation of Tomloprod Modal.\r\nTomloprodModal.stop();\r\n\r\n//////////// Open the modal window with the indicated ID\r\nTomloprodModal.openModal(\"logInPopUp\");\r\n\r\n//////////// Close the current modal window\r\nTomloprodModal.closeModal();\r\n\r\n//////////// Check if there are any open modal window\r\nvar isOpen = TomloprodModal.isOpen;\r\n\r\n//////////// Gets the current modal window\r\nvar currentModalWindow = TomloprodModal.modal;\r\n````\r\n\r\n\u003cbr\u003e\r\n\r\n### Handlers\r\n---\r\n\r\n\r\n````javascript\r\n///////////// Opening\r\nTomloprodModal.registerHandler(\"opened\", function () {\r\n    console.info(\"Opening \" + TomloprodModal.modal.id);\r\n});\r\n\r\n///////////// Closing\r\nTomloprodModal.registerHandler(\"closed\", function () {\r\n    console.info(\"Closing \" + TomloprodModal.modal.id);\r\n});\r\n\r\n///////////// Stop dragging\r\nTomloprodModal.registerHandler(\"stopDragging\", function () {\r\n    console.info(\"Coord X: \" + TomloprodModal.modal.style.left + ' | Coord Y: ' + TomloprodModal.modal.style.top);\r\n});\r\n\r\n///////////// Register and remove handlers\r\nTomloprodModal.registerHandler(\"opened\", myOpenedHandler);\r\n\r\nfunction myOpenedHandler(){\r\n     console.info(\"Opening \" + TomloprodModal.modal.id);\r\n}\r\n\r\n//////////// Deletes the listener of the indicated handler.\r\nTomloprodModal.removeHandler('opened', myOpenedHandler);\r\n\r\n/////////// Or, if the handler is omitted, deletes all:\r\nTomloprodModal.removeHandler('opened');\r\n````\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomloprod%2Ftomloprodmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomloprod%2Ftomloprodmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomloprod%2Ftomloprodmodal/lists"}