{"id":23291151,"url":"https://github.com/mleidel/jsmodal","last_synced_at":"2025-07-16T15:42:06.217Z","repository":{"id":155144901,"uuid":"228699715","full_name":"MLeidel/JSmodal","owner":"MLeidel","description":"modal pop-up boxes for Javascript alert, confirm, and prompt","archived":false,"fork":false,"pushed_at":"2020-05-21T00:07:34.000Z","size":16,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T17:52:09.223Z","etag":null,"topics":["javascript","javascript-library","modal-dialogs","webapp"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/MLeidel.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":"2019-12-17T20:53:33.000Z","updated_at":"2020-11-23T00:01:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"1c8cfce4-0fde-40e7-8a3e-81a8aa8a42bf","html_url":"https://github.com/MLeidel/JSmodal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MLeidel/JSmodal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLeidel%2FJSmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLeidel%2FJSmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLeidel%2FJSmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLeidel%2FJSmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MLeidel","download_url":"https://codeload.github.com/MLeidel/JSmodal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLeidel%2FJSmodal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265521970,"owners_count":23781590,"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","javascript-library","modal-dialogs","webapp"],"created_at":"2024-12-20T05:15:36.373Z","updated_at":"2025-07-16T15:42:06.171Z","avatar_url":"https://github.com/MLeidel.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSmodal\nmodal pop-up boxes for Javascript alert, confirm, and prompt\n\n### JSmodal.js\n\nA modal message box, form or dialog box must be processed\nbefore you can continue working with the rest of the\napplication. Examples in Javascript are the\n```alert, confirm, and prompt``` statements.\nThese commands are very useful but do not permit additional styling.\n\nJSmodal is a small Javascript library and css that \nwork with the DOM to make modal dialogs\nflexible and attractive.\n\nTo use JSmodal it is important to understand that, unlike the Javascript\n```alert, confirm, prompt``` commands, JSmodal functions are NON-BLOCKING.\nThat means execution of the code does NOT stop when the box is displayed.\nBecause of this JSmodal usually cannot be a simple replacement of the\nJavascript methods.\n\nFirst JSmodal.js and JSmodal.css must be brought into your web page:\n```javascript\n  \u003cscript src=\"JSmodal.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"JSmodalani.css\"\u003e\n```\n\n* __JSmodal.open(_mode, content_)__  \n  This opens the modal object over the page dimming the underlying page content.\n  A close \"X\" is always present in the upper right corner of the box. Clicking\n  \"X\" will close the modal object.\n  \n  If ___mode___ is set to 1 then any click outside of the box will close\n  the modal object.  \n  If ___mode___ is set to 0 then only the \"X\" will\n  close the modal object.\n\n* __JSmodal.close()__  \n  Call this to programatically close the modal object.\n  \n* __JSmodal.confirm(_commands, content_)__\n  This opens a modal 'confirm' box.\n  The _commands_ are the Javascript to be executed when the \n  user clicks the 'confirm' button.\n  \n* __JSmodal.prompt(_commands, content_)__\n  This open a modal box with an input field and and 'OK' button.\n  The _commands_ are the Javascript to be executed when the \n  user clicks the 'OK' button. \n  The ID of the input text field is \"JSid\".\n\n\n### __JSmodal.css__  \n  Using this style sheet presents a box without any animation.\n  Using _JSmodalani.css_ is the same but WITH animation.\n\n### Demo page for JSmodal  \n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"en-US\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset='UTF-8'\u003e\n\t\u003cmeta name='viewport' content='width=device-width, initial-scale=1'\u003e\n\t\u003ctitle\u003eJSmodal All Example\u003c/title\u003e\n\n  \u003cscript src=\"JSmodal.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"JSmodalani.css\"\u003e\n  \u003c!--\u003clink rel=\"stylesheet\" href=\"JSmodal.css\"\u003e--\u003e\n  \u003cstyle\u003e\n    a:hover {\n      cursor: pointer;\n      background: lightyellow;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c!--\nNOTE: JSmodal will usually be called inline rather than from an HTML tag.\nFor demo purposes it seemed better to use click events.\n\nIMPORTANT NOTE: Unlike the Javascript 'alert, confirm, prompt' statements\nJSmodal is NON-BLOCKING - it does not \"wait\" for user action.\n--\u003e\n\n\u003ch2\u003eModal Boxes: open\u003c/h2\u003e\n\n\u003c!-- Triggering the modal boxes --\u003e\n\n\u003c!-- call the modal box within a function --\u003e\n\u003cbutton onclick=\"myMsg()\"\u003eOpen Example A\u003c/button\u003e\n\n\u003c!-- open the modal box in a DOM event --\u003e\n\u003cbutton onclick=\"JSmodal.open(1,'Hello Modal World')\"\u003eOpen Example B\u003c/button\u003e\n\n\u003c!-- open modal box with a long message --\u003e\n\u003cbutton onclick=\"JSmodal.open(1,`\n  Phasellus scelerisque sodales condimentum.\u003cbr\u003e\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\u003cbr\u003e\n  Phasellus scelerisque sodales condimentum.\u003cbr\u003e\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\u003cbr\u003e\n  Phasellus scelerisque sodales condimentum.`)\"\u003eOpen Example C\u003c/button\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\u003cdiv id=\"H\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\nfunction myMsg() {\n  JSmodal.open(0,\"Phasellus scelerisque sodales condimentum.\");\n  // JSmodal does not wait for user action like the javascript 'alert' statement.\n  document.getElementById('H').innerHTML = \"JSmodal is NON-BLOCKING !\";\n}\n\u003c/script\u003e\n\n\u003c!-- ////////////////////////////////////////////////////////////////////////// --\u003e\n\u003ch2\u003eModal Boxes: confirm\u003c/h2\u003e\n\n\u003cbutton onclick='JSmodal.confirm(\"thisConfirm()\", \"Please confirm this\");'\u003e\n  JSmodal.confirm Example\u003c/button\u003e\u0026nbsp;\n\n\u003c!-- alternatively:\n    the 'confirmed' action can be included as shown here --\u003e\n\u003ca onclick=\"JSmodal.confirm(`\n  JSmodal.close();\n  alert('Confirmed')`,\n  'Please confirm this')\"\u003eanchor JSmodal.confirm\u003c/a\u003e\n\n\u003cscript\u003e\n// User is a user supplied routine to process confirmed response\nfunction thisConfirm() {\n  JSmodal.close();  // must call to close the modal box\n  // actions to be performed on confirmation\n  alert(\"Confirmed\");\n}\n\u003c/script\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\u003c!-- ////////////////////////////////////////////////////////////////////////// --\u003e\n\u003ch2\u003eModal 'prompt' Example\u003c/h2\u003e\n\u003c!--\nNOTE: This CANNOT be implemented like the javascript 'prompt' statement!\nJSmodal is NON-BLOCKING which means that it does\nNOT \"wait\" for user input before proceeding to the next statement.\nsee \"Open Example A\"\n--\u003e\n\n\u003cbutton onclick='myPrompt()'\u003eJSmodal.prompt Example\u003c/button\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\u003cdiv id=\"I\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\nfunction myPrompt() {\n  JSmodal.prompt(`\n    JSmodal.close();\n    let val = document.getElementById('JSid').value;\n    alert('prompted input: ' + val);`,\n  \"Please enter your email\");\n\n  // immediately falls through to do this ...\n  document.getElementById('I').innerHTML = \"Remember JSmodal is Non-blocking!\";\n}\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n-----\n\n__JSmodal.js__\n```javascript\nconst JSmodal = {\n\n  closer : 0,  // modal close style: 0=X only|1=Outside Box Or X\n              // the value for close is set in JSmodal.open function\n\n  // on document ready\n  init : function() {\n    document.getElementsByTagName(\"body\")[0].innerHTML += `\n      \u003cdiv id=\"JSmodal\" class=\"JSmodal\"\u003e\n        \u003cdiv class=\"JSmodal-content\"\u003e\n          \u003cspan class=\"JSclose\" onclick=\"JSmodal.close();\"\u003e\u0026times;\u003c/span\u003e\n          \u003cp\u003e\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    `;\n\n    window.onclick = function(event) {\n      if (event.target == document.getElementById('JSmodal')) {\n        if (JSmodal.closer === 1) {\n          document.getElementById('JSmodal').style.display = \"none\";\n        }\n      }\n    };\n  },\n\n  // call this with text to display in 'msg'\n  open : function(mode, msg) {\n    if (arguments.length \u003c 2) {\n      alert(\"Missing mode arg in JSmodal.open(mode, msg)\");\n      return;\n    }\n    JSmodal.closer = mode;\n    document.querySelector(\".JSmodal-content p\").innerHTML = msg;\n    document.getElementById('JSmodal').style.display = \"block\";\n  },\n\n  // When the user clicks on \u003cspan\u003e (x), close the modal\n  close : function() {\n    document.getElementById('JSmodal').style.display = \"none\";\n  },\n\n  // confirm uses open always with a 0 open mode\n  confirm : function(routine, msg) {\n    msg += `\n      \u003cbr\u003e\u003cbr\u003e\n      \u003cbutton onclick=\"${routine}\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;Confirm\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/button\u003e\n    `;\n    JSmodal.open(0, msg);\n  },\n\n  // prompt uses open always with a 0 open mode\n  prompt : function(routine, msg) {\n    msg += `\n      \u003cbr\u003e\u003cbr\u003e\n      \u003cinput type=\"text\" id=\"JSid\" size=\"32\"\u003e\u003cbr\u003e\u003cbr\u003e\n      \u003cbutton onclick=\"${routine}\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; OK \u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/button\u003e\n    `;\n    JSmodal.open(0, msg);\n  }\n\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\n  JSmodal.init();\n});\n\n```\n-----\n__JSmodal.css__\n```css\n.JSmodal {\n  display: none; /* Hidden by default */\n  position: fixed; /* Stay in place */\n  z-index: 1; /* Sit on top */\n  padding-top: 100px; /* Location of the box */\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: rgb(0,0,0); /* Fallback color */\n  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n}\n\n/* Modal Content */\n\n.JSmodal-content {\n  background-color: #fefefe;\n  margin: auto;\n  padding: 20px;\n  border: 1px solid #888;\n  width: 60%;\n  border-radius: 5px;\n}\n\n/* The Close Button */\n\n.JSclose {\n  color: #aaaaaa;\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n}\n\n.JSclose:hover,\n.JSclose:focus {\n  color: #000;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmleidel%2Fjsmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmleidel%2Fjsmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmleidel%2Fjsmodal/lists"}