{"_id":"576c27dd808cf02b00d37427","user":"5730eaf719c1e00e006d215f","version":{"_id":"5730eb946b55e93400b32ab1","project":"5730eb946b55e93400b32aae","__v":4,"createdAt":"2016-05-09T19:57:08.646Z","releaseDate":"2016-05-09T19:57:08.646Z","categories":["5730eb946b55e93400b32ab2","5734b41b9c2cf82900b243ee","5734c6986d9a38200073dd32","5734cea86d9a38200073dd5a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.3.25","version":"0.3.25"},"__v":0,"category":{"_id":"5734b41b9c2cf82900b243ee","__v":0,"project":"5730eb946b55e93400b32aae","version":"5730eb946b55e93400b32ab1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-12T16:49:31.689Z","from_sync":false,"order":9999,"slug":"components","title":"Components"},"parentDoc":null,"project":"5730eb946b55e93400b32aae","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-23T18:18:05.126Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"Modal can render full page modals, with or without greyed out overlays, and modals that center in a div or other container as well.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example Usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pull in the library\\nconst UI = require('jibe-juice');\\n\\n// Instantiate a component, pass the selector of the container to insert component into and the opts\\nconst modal = new UI.Modal('body', 'This is a test modal',\\n  {\\n    fullscreenModal: true,\\n    hideOnOverlayClick: true,\\n    showOverlay: true\\n  });\\n\\n// Render the DOM for the Modal component\\nmodal.render();\\n\\n// Show the modal\\nmodal.show();\\n\\n// Hide the modal\\nmodal.hide();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"params\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"el\",\n    \"2-0\": \"opts\",\n    \"2-3\": \"A catch all for various options. See the opts table below for options specific to this component.\",\n    \"2-1\": \"object\",\n    \"2-2\": \"{}\",\n    \"0-1\": \"string\",\n    \"0-2\": \"undefined\",\n    \"0-3\": \"A string of the selector for the element to put the component in\",\n    \"1-0\": \"content\",\n    \"1-1\": \"string\",\n    \"1-2\": \"undefined\",\n    \"1-3\": \"A string of html to put in the modal content\"\n  },\n  \"cols\": 4,\n  \"rows\": 3\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"h-4\": \"Description\",\n    \"0-0\": \"closeButton\",\n    \"0-2\": \"`'X'`\",\n    \"0-1\": \"string\",\n    \"0-3\": \"An HTML string to display the close icon\",\n    \"1-0\": \"fullscreenModal\",\n    \"1-1\": \"boolean\",\n    \"1-2\": \"`true`\",\n    \"1-3\": \"A boolean indicating if the modal should be 100vw and 100vh or fill its container\",\n    \"2-0\": \"hideOnOverlayClick\",\n    \"2-1\": \"boolean\",\n    \"2-2\": \"`false`\",\n    \"2-3\": \"A boolean indicating if clicking the overlay should close the modal\",\n    \"3-0\": \"showOverlay\",\n    \"3-1\": \"boolean\",\n    \"3-2\": \"`false`\",\n    \"3-3\": \"A boolean to show the grey overlay or not\"\n  },\n  \"cols\": 4,\n  \"rows\": 4\n}\n[/block]","excerpt":"","slug":"modal","type":"basic","title":"Modal"}
Modal can render full page modals, with or without greyed out overlays, and modals that center in a div or other container as well. [block:api-header] { "type": "basic", "title": "Example Usage" } [/block] [block:code] { "codes": [ { "code": "// Pull in the library\nconst UI = require('jibe-juice');\n\n// Instantiate a component, pass the selector of the container to insert component into and the opts\nconst modal = new UI.Modal('body', 'This is a test modal',\n {\n fullscreenModal: true,\n hideOnOverlayClick: true,\n showOverlay: true\n });\n\n// Render the DOM for the Modal component\nmodal.render();\n\n// Show the modal\nmodal.show();\n\n// Hide the modal\nmodal.hide();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "params" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "el", "2-0": "opts", "2-3": "A catch all for various options. See the opts table below for options specific to this component.", "2-1": "object", "2-2": "{}", "0-1": "string", "0-2": "undefined", "0-3": "A string of the selector for the element to put the component in", "1-0": "content", "1-1": "string", "1-2": "undefined", "1-3": "A string of html to put in the modal content" }, "cols": 4, "rows": 3 } [/block] [block:api-header] { "type": "basic", "title": "opts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "h-4": "Description", "0-0": "closeButton", "0-2": "`'X'`", "0-1": "string", "0-3": "An HTML string to display the close icon", "1-0": "fullscreenModal", "1-1": "boolean", "1-2": "`true`", "1-3": "A boolean indicating if the modal should be 100vw and 100vh or fill its container", "2-0": "hideOnOverlayClick", "2-1": "boolean", "2-2": "`false`", "2-3": "A boolean indicating if clicking the overlay should close the modal", "3-0": "showOverlay", "3-1": "boolean", "3-2": "`false`", "3-3": "A boolean to show the grey overlay or not" }, "cols": 4, "rows": 4 } [/block]