PK /Tz8=1 1 f-modal.cccomp PK T}uD ? component.json?{"UUID":"fa149d52-6f33-4e0b-b5fc-0f099e48759e","additional_states":{"Button":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Font Icon Link":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 3":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 4":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Picture":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3516","appId":"RSD","appVersion":3516,"buildNumber":5971,"component_resources":{"classes":7,"file_sizes_values":[137910,0,0],"file_type_values":[2,0,0],"html_elements":0,"ids":2,"links_external":0,"links_internal":1,"local_files":"2 (local size 134,68 kB)","styled_breakpoints":"640px / 1024px"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
\n// Get the modal\nvar modal = document.getElementById("myModal");\n\n// Get the button that opens the modal\nvar btn = document.getElementById("myBtn");\n\n// Get the element that closes the modal\nvar span = document.getElementsByClassName("modalclose")[0];\n\n// When the user clicks the button, open the modal \nbtn.onclick = function() {\n modal.style.display = "block";\n}\n\n// When the user clicks on (x), close the modal\nspan.onclick = function() {\n modal.style.display = "none";\n}\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n if (event.target == modal) {\n modal.style.display = "none";\n }\n}\n\" data-outline-closed=\"\">
Click the picture to open the modal
Here is the modal!
Delete this paragraph and the rest of the contents and pop something more exciting in here! Anything you like.