{"html":"

\n\n

\n\tHow to create a pop-up without JavaScript\n\t

Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:

\n\n\t

Toggle the How it works button for more info.

\n\n

\n\t

How it works

\n\t

\n\t\t\t

The scaling effect you see when you open this <details> element is created by using a keyframe animation.

\n\t\t

@keyframes scale { \n 0% {\n  transform: scale(0);\n }\n 100% {\n  transform: scale(1);\n }\n}

This animation is added to the <div>, but only when the [open] attribute is toggled.

details[open] div { \n animation: scale .15s ease;\n}

\n\t

Sadly there's no way (that I know of) to animate the <div> when the <details> is closing.

\n\t

","css":".wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n\narticle {\n margin-top: 50px;\n width: 90%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n font-size: 1.125rem;\n padding: 1.5rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);\n}\n\narticle > * + * {\n margin-top: 0.5em;\n}\n\narticle:is(h1, h2, h3) + * {\n margin-top: 0.5em;\n}\n\narticle .h1 {\n font-weight: 900;\n font-size: 2rem;\n line-height: 1.125;\n}\n\narticle code {\n background-color: #eee;\n font-weight: 600;\n font-family: monospace;\n}\n\ndetails {\n position: relative;\n right: 16px;\n margin-top: 35px;\n bottom: 16px;\n color: #6b7280;\n display: flex;\n flex-direction: column;\n}\n\ndetails div {\n background-color: #1e1e27;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);\n padding: 1rem;\n border-radius: 8px;\n position: absolute;\n height: 350px;\n width: 400px;\n bottom: calc(100% + 1rem);\n right: -50%;\n overflow: auto;\n transform-origin: 100% 100%;\n color: #95a3b9;\n}\n\ndetails div::-webkit-scrollbar {\n width: 15px;\n background-color: #1e1e27;\n}\n\ndetails div::-webkit-scrollbar-thumb {\n width: 5px;\n border-radius: 99em;\n background-color: #95a3b9;\n border: 5px solid #1e1e27;\n}\n\ndetails div > * + * {\n margin-top: 0.75em;\n}\n\ndetails div p > code {\n font-size: 1rem;\n font-family: monospace;\n}\n\ndetails div pre {\n white-space: pre-line;\n border: 1px solid #95a3b9;\n border-radius: 6px;\n font-family: monospace;\n padding: 0.75em;\n font-size: 0.875rem;\n color: #fff;\n}\n\ndetails[open] div {\n -webkit-animation: scale 0.25s ease;\n animation: scale 0.25s ease;\n}\n\nsummary {\n display: inline-flex;\n margin-left: auto;\n margin-right: auto;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n padding: 0.75em 3em 0.75em 1.25em;\n border-radius: 99em;\n color: #fff;\n background-color: #185adb;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n list-style: none;\n text-align: center;\n cursor: pointer;\n transition: 0.15s ease;\n position: relative;\n}\n\nsummary::-webkit-details-marker {\n display: none;\n}\n\nsummary:hover, summary:focus {\n background-color: #1348af;\n}\n\nsummary svg {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translateY(-50%);\n width: 1.5em;\n height: 1.5em;\n}\n\n@-webkit-keyframes scale {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes scale {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}"}

fluffy-vampirebat-68

👁 实时预览

📝 源代码