PK lV$ modal-close-anywhere.cccompPK Vp&¡ component.jsonc{"UUID":"7d507f7e-9f12-401b-bb02-4f31b29a34b4","additional_states":{"Button":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Font Icon":{"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"}}},"appBuildInfo":"RSD 5.0.3541","appId":"RSD","appVersion":3541,"buildNumber":5982,"component_resources":{"classes":7,"file_sizes_values":[0,0,0],"file_type_values":[0,0,0],"html_elements":0,"ids":0,"links_external":0,"links_internal":0,"local_files":0,"styled_breakpoints":""},"description":"Your component description","element_name":"Container","framework":"vanillacss","html":"
\nvar mb = document.querySelector(".modal-bkgrnd");\nvar mc = document.querySelector(".modal-content");\nfunction modopen() {mb.style.display = "block";}\nfunction modclose () {mb.style.display = "none";}\n\nwindow.onclick = function(event) {\nif (event.target == mb) {mb.style.display = "none";}\n}\n\" data-outline-closed=\"\">
Open the modal Here is the modal Delete this paragraph and pop something more exciting in here! Anything you like. Click on the closing X or anywhere outside the modal to close it.
","htmlembed":{},"mobile_first":true,"name":"modal-close-anywhere","resources":{},"stylesheet":".container.modal-wrap {\n display:block;\n justify-content:flex-start;\n align-items:center;\n position:static;\n z-index:0;\n flex-wrap:wrap;\n flex-direction:column;\n width:100%;\n height:100%;\n}\n\nbutton.open-button {\n margin-top:30px;\n margin-left:auto;\n display:block;\n padding-top:8px;\n padding-bottom:8px;\n padding-right:15px;\n padding-left:15px;\n font-size:18px;\n background-color:rgba(248, 237, 17, 1);\n font-weight:600;\n border-top-color:rgba(221, 221, 221, 1);\n border-right-color:rgba(221, 221, 221, 1);\n border-bottom-color:rgba(221, 221, 221, 1);\n border-left-color:rgba(221, 221, 221, 1);\n border-top-left-radius:5px 5px;\n border-top-right-radius:5px 5px;\n border-bottom-right-radius:5px 5px;\n border-bottom-left-radius:5px 5px;\n margin-right:auto;\n position:static;\n z-index:1;\n}\n\n.container.modal-bkgrnd {\n width:100%;\n height:100%;\n padding-right:20px;\n padding-left:20px;\n box-sizing:border-box;\n position:fixed;\n top:0px;\n z-index:1;\n background-color:rgba(0, 0, 0, 0.22);\n display:none;\n box-shadow:rgba(0, 0, 0, 0.5) 4px 4px 8px 0px;\n}\n\n.container.modal-content {\n width:100%;\n max-width:800px;\n margin-right:auto;\n margin-left:auto;\n padding-top:10px;\n margin-top:100px;\n padding-bottom:15px;\n background-color:rgba(160, 240, 248, 1);\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(204, 204, 204, 1);\n border-right-color:rgba(204, 204, 204, 1);\n border-bottom-color:rgba(204, 204, 204, 1);\n border-left-color:rgba(204, 204, 204, 1);\n border-top-left-radius:10px 10px;\n border-top-right-radius:10px 10px;\n border-bottom-right-radius:10px 10px;\n border-bottom-left-radius:10px 10px;\n box-shadow:rgba(0, 0, 0, 0.4) 4px 4px 8px 0px;\n}\n\nspan.glyph.modal-close {\n float:none;\n font-size:26px;\n padding-right:10px;\n position:static;\n top:20px;\n right:20px;\n text-align:right;\n}\n\nh4.modal-heading {\n width:80%;\n margin-right:auto;\n margin-left:auto;\n}\n\np.paragraph.modal-para {\n width:80%;\n margin-right:auto;\n margin-left:auto;\n padding-top:10px;\n padding-right:10px;\n padding-bottom:10px;\n padding-left:10px;\n font-size:16px;\n}","timestamp":1687443864248,"type":"Container","units":"rem"}
PK Vp&¡ component.jsonPK <