[{"id":102,"created_at":"2023-12-08T06:47:28.959229+00:00","html":"\r\n\r\n","css":"body {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: white;\r\n\r\n}\r\n\r\n#myModal {\r\n width: 300px;\r\n padding: 20px;\r\n background-color: white;\r\n border-radius: 8px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\r\n transform: translateY(-100%);\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n#myModal[open] {\r\n transform: translateY(0);\r\n}\r\n\r\n#myModal::backdrop {\r\n backdrop-filter: blur(1px);\r\n}\r\n\r\n/* Optional styles for backdrop */\r\n#myModal::backdrop {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n#openModal {\r\n position: absolute;\r\n}\r\n\r\nbutton {\r\n padding: 10px;\r\n background-color: skyblue;\r\n border: 0;\r\n border-radius: 7px;\r\n}\r\n\r\n\r\n\r\n@keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes fadeOut {\r\n from {\r\n opacity: 1;\r\n }\r\n\r\n to {\r\n opacity: 0;\r\n }\r\n}","js":"const openModalBtn = document.getElementById('openModal');\r\nconst closeModalBtn = document.getElementById('closeModal');\r\nconst myModal = document.getElementById('myModal');\r\n\r\nopenModalBtn.addEventListener('click', () => {\r\n myModal.showModal();\r\n});\r\n\r\ncloseModalBtn.addEventListener('click', () => {\r\n myModal.close();\r\n});\r\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"IQwG4s","description":"Modal With Blurred Background","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":733}],"profiles":{"username":"devcanvas"}}]