CodePen Embed - KIG (controlled dialog)

Live

This Pen is owned by Michel Maillard on CodePen. It is a fork of this Pen.

External CSS

https://codepen.io/hubpork/pen/WNVodQd.cs

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"xxjmOQY\",\"auto_save\":true},\"hashid\":\"xxjmOQY\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/hubpork/pen/WNVodQd.cs\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[],\"id\":63796641,\"user_id\":67044,\"html\":\"<article class=\\\"post wrapper\\\" data-direction=\\\"rtl\\\">\\n  <div class=\\\"post__content\\\">\\n    <section class=\\\"prose flow\\\">\\n      <h1>Dialog controlled out animation</h1>\\n      <button type=\\\"button\\\" id=\\\"open\\\" class=\\\"button\\\" data-button-variant=\\\"secondary\\\">Open</button>\\n    </section>\\n  </div>\\n</article>\\n\\n<dialog>\\n\\t\\t<header class=\\\"dialog-container-header prose\\\">\\n\\t\\t\\t<h2 class=\\\"dialog-container-title\\\">\\n\\t\\t\\t\\t<svg role=\\\"img\\\" viewBox=\\\"0 0 24 24\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><title>30 seconds of code</title><path d=\\\"M13.895 12c0 .734-.593 1.328-1.324 1.328h-.58a6.666 6.666 0 0 1-.389 5.09 6.633 6.633 0 0 1-2.22 2.508 6.6 6.6 0 0 1-9.028-1.619l-.044-.06c-.47-.563-.397-1.4.163-1.872a1.32 1.32 0 0 1 1.864.164l.158.207a3.972 3.972 0 0 0 3.523 1.63 3.96 3.96 0 0 0 3.226-2.163A3.997 3.997 0 0 0 7.771 12 3.977 3.977 0 0 0 9.45 9.927a3.997 3.997 0 0 0-1.537-4.644 3.96 3.96 0 0 0-5.417.971l-.158.208a1.32 1.32 0 0 1-1.864.163A1.332 1.332 0 0 1 .31 4.754l.044-.061a6.622 6.622 0 0 1 2.583-2.128 6.595 6.595 0 0 1 6.446.51 6.634 6.634 0 0 1 2.22 2.506 6.662 6.662 0 0 1 .389 5.09h.58c.73 0 1.323.595 1.323 1.329Zm-.067 5.21a8.28 8.28 0 0 1-1.196 2.811 6.628 6.628 0 0 0 4.717 1.964A6.654 6.654 0 0 0 24 15.328V8.672a6.654 6.654 0 0 0-6.651-6.657c-1.844 0-3.513.75-4.717 1.964a8.28 8.28 0 0 1 1.196 2.81 3.99 3.99 0 0 1 7.511 1.883v6.656a3.992 3.992 0 0 1-7.51 1.883Z\\\"/></svg>\\n\\t\\t\\t\\tTerms and Services\\n\\t\\t\\t</h2>\\n\\t\\t\\t<button class=\\\"icon-button close\\\">\\n\\t\\t\\t\\t<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" width=\\\"24\\\" height=\\\"24\\\">\\n\\t\\t\\t\\t\\t<path fill=\\\"none\\\" d=\\\"M0 0h24v24H0z\\\" />\\n\\t\\t\\t\\t\\t<path fill=\\\"currentColor\\\" d=\\\"M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z\\\" />\\n\\t\\t\\t\\t</svg>\\n\\t\\t\\t</button>\\n\\t\\t</header>\\n\\t\\t<section class=\\\"dialog-container-body prose\\\" data-direction=\\\"rtl\\\">\\n\\t\\t\\t<h3>Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.</h3>\\n\\n\\t\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor non habere, sed ne palatum quidem. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete. </p>\\n\\n\\t\\t\\t<h4>Ut proverbia non nulla veriora sint quam vestra dogmata.</h4>\\n\\n\\t\\t\\t<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; </p>\\n\\n\\t\\t\\t<p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit; Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Nec enim, cum tua causa cui commodes, beneficium illud habendum est, sed faeneratio, nec gratia deberi videtur ei, qui sua causa commodaverit. Universa enim illorum ratione cum tota vestra confligendum puto. Sed residamus, inquit, si placet. Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ita enim se Athenis collocavit, ut sit paene unus ex Atticis, ut id etiam cognomen videatur habiturus. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. </p>\\n\\n\\t\\t\\t<h3>An hoc usque quaque, aliter in vita?</h3>\\n\\t\\t\\t<ol>\\n\\t\\t\\t\\t<li>Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.</li>\\n\\t\\t\\t\\t<li>Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.</li>\\n\\t\\t\\t\\t<li>Certe nihil nisi quod possit ipsum propter se iure laudari.</li>\\n\\t\\t\\t\\t<li>Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur.</li>\\n\\t\\t\\t</ol>\\n\\n\\t\\t\\t<p>Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Totum autem id externum est, et quod externum, id in casu est. Non autem hoc: igitur ne illud quidem. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Quamquam tu hanc copiosiorem etiam soles dicere. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Videsne quam sit magna dissensio? </p>\\n\\n\\t\\t\\t<h4>Claudii libidini, qui tum erat summo ne imperio, dederetur.</h4>\\n\\n\\t\\t\\t<p>Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute, ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Haec mirabilia videri intellego, sed cum certe superiora firma ac vera sint, his autem ea consentanea et consequentia, ne de horum quidem est veritate dubitandum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi altera, vivendi tertia. Nemo enim est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod omnia referrentur, quod est ultimum rerum appetendarum. Quid est, quod ab ea absolvi et perfici debeat? Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Quod iam a me expectare noli. Quod totum contra est. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. </p>\\n\\n\\t\\t\\t<h3>Sed nimis multa.</h3>\\n\\n\\t\\t\\t<p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed ad illum redeo. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. </p>\\n\\n\\t\\t</section>\\n\\t\\t<footer class=\\\"dialog-container-footer\\\">\\n      <button type=\\\"button\\\" id=\\\"decline\\\" class=\\\"button close\\\" data-button-variant=\\\"ghost\\\">decline</button>\\n      <button type=\\\"button\\\" class=\\\"button close\\\" data-button-variant=\\\"secondary\\\">Accept</button>\\n\\t\\t</footer>\\n</dialog>\",\"css\":\"h1,\\nh2,\\nh3,\\nh4 {\\n  font-family: var(--font-satoshi, var(--font-display));\\n}\\n\\nh1 {\\n\\tmargin-block-start: 0;\\n  margin-inline: auto;\\n}\\n\\n.post {\\n  height: calc(100dvh - (var(--space-xl) * 2));\\n  display: flex;\\n  justify-content: center;\\n  flex-direction: column;\\n  text-align: center;\\n}\\n\\ndialog {\\n  contain: paint;\\n  border: 1px solid var(--color-dark);\\n  opacity: 0;\\n  padding: 0;\\n}\\n\\ndialog[open] {\\n\\toverflow: hidden;\\n\\tdisplay: flex;\\n\\tflex-direction: column;\\n  animation: open 0.3s ease-out;\\n  animation-fill-mode: both;\\n  width: min(90vw, 750px);\\n  max-height: 90dvh;\\n  top: 50%;\\n  left: 50%;\\n  transform: translateX(-50%) translateY(-50%);\\n  box-shadow: 0 0 0 100000px var(--color-dark);\\n}\\n\\ndialog[closing] {\\n  animation: close 0.3s ease-out;\\n  animation-fill-mode: both;\\n}\\n\\n@keyframes open {\\n  0% {\\n    opacity: 0;\\n  }\\n  100% {\\n    opacity: 1;\\n  }\\n}\\n\\n@keyframes close {\\n  0% {\\n    opacity: 1;\\n  }\\n  99% {\\n    opacity: 0;\\n  }\\n  100% {\\n    display: none;\\n  }\\n}\\n\\n\\n.dialog-container-header {\\n\\tpadding: var(--space-m);\\n\\tborder-bottom: 1px solid var(--color-light-shade);\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: space-between;\\n}\\n\\n.dialog-container-title {\\n  font-size: var(--size-step-1);\\n\\tdisplay: flex;\\n\\talign-items: center;\\n  margin: 0;\\n\\tgap: var(--space-s);\\n\\tsvg {\\n    background-color: transparent;\\n\\t\\twidth: 32px;\\n\\t\\theight: 32px;\\n\\t\\tcolor: #750550;\\n\\t}\\n}\\n\\n.dialog-container-body {\\n\\tpadding: 0 var(--space-m) var(--space-m);\\n\\toverflow-y: auto;\\n}\\n\\n\\n.dialog-container-footer {\\n  margin: 0;\\n\\tpadding: var(--space-m);\\n\\tborder-top: 1px solid var(--color-light-shade);\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: flex-end;\\n\\tgap: var(--space-s);\\n\\tposition: relative;\\n  font-size: var(--size-step-0);\\n\\t&:after {\\n\\t\\tcontent: \\\"\\\";\\n\\t\\tdisplay: block;\\n\\t\\tposition: absolute;\\n\\t\\ttop: -51px;\\n\\t\\tleft: 24px;\\n\\t\\tright: 24px;\\n\\t\\theight: 50px;\\n\\t\\tflex-shrink: 0;\\n\\t\\tbackground-image: linear-gradient(to top, rgba(#fff, 0.75), transparent);\\n\\t\\tpointer-events: none;\\n\\t}\\n}\\n\\n\\n.icon-button {\\n  background: transparent;\\n\\tpadding: 0;\\n\\tborder: 0;\\n\\twidth: 40px;\\n\\theight: 40px;\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n\\tline-height: 1;\\n\\tcursor: pointer;\\n\\tborder-radius: var(--radius-s);\\n\\ttransition: 0.15s ease;\\n\\tsvg {\\n    background-color: transparent;\\n\\t\\twidth: 24px;\\n\\t\\theight: 24px;\\n\\t}\\n\\n\\t&:hover,\\n\\t&:focus {\\n\\t\\tbackground-color: #dfdad7;\\n\\t}\\n}\\n\",\"js\":\"const openButton = document.querySelector('#open');\\nconst dialog = document.querySelector('dialog');\\nconst closeButtons = document.querySelectorAll('.close');\\n\\nopenButton.addEventListener('click', () => {\\n  dialog.show();\\n});\\n\\ncloseButtons.forEach(button => {\\n  button.addEventListener('click', () => {\\n    dialog.setAttribute('closing', true);\\n    setTimeout(() => {\\n      dialog.close();\\n      dialog.removeAttribute('closing');\\n    }, 400);\\n  });\\n});\\n\\nwindow.addEventListener('keydown', (e) => {\\n  if (e.key === 'Escape') {\\n    dialog.setAttribute('closing', true);\\n    setTimeout(() => {\\n      dialog.close();\\n      dialog.removeAttribute('closing');\\n    }, 400);\\n  }\\n});\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-10-11T17:24:05.565Z\",\"updated_at\":\"2024-11-13T13:44:17.957Z\",\"title\":\"KIG (controlled dialog)\",\"description\":\"\",\"slug_hash\":\"xxjmOQY\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":61236619,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":3,\"views_count\":28,\"pick_visible_at\":null,\"cpid\":\"0183c813-353d-7eea-b4f3-9422f0049980\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}