deploy: 9c84f82

akhmadullin · Oct 1, 2024 · 38dab2c · 38dab2c
1 parent 5a962da
commit 38dab2c
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/demos/dialog-modal-in-modal-escape/index.html b/demos/dialog-modal-in-modal-escape/index.html
@@ -0,0 +1,84 @@
+
+
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <title>Диалог - модальный в модальном - закрытие на Escape</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preload" href="../../fonts/PT_Sans/pt-sans_caption-regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="../../fonts/PT_Sans/pt-sans_caption-bold.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="../../lib/styles/fonts-for-demos.css">
+    <link rel="stylesheet" href="../../lib/styles/buttons.css">
+    <link rel="stylesheet" href="../../lib/pressed-key-shower/styles.css">
+</head>
+<body>
+    <style>
+        :root {
+            /* --placeholer-background: lightgray;
+            --border-radius-size: 6px; */
+        }
+
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        html, body, div, button {
+            box-sizing: border-box;
+        }
+
+        .container {
+            padding: 20px;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+        }
+    </style>
+    <div class="container">
+        <div id="pressed-key" class="pressed-key">Escape</div>
+        <button class="button button_yellow" id="modal-dialog-openner">
+            Открыть первый диалог
+        </button>
+       <dialog id="modal-dialog" style="width: 500px; height: 300px; box-sizing: border-box; padding: 50px; text-align: center;">
+            <h2>Первый диалог</h2>
+            <p>Можем позвать моего друга!</p>
+            <button class="button button_yellow" id="modal-dialog-openner-2">
+                Открыть второй диалог
+            </button>
+            <!-- <button id="modal-dialog-closer">Закрыть</button> -->
+       </dialog>
+       <dialog id="modal-dialog-2" style="text-align: center;">
+        <h2>Второй диалог</h2>
+        <p>Нас теперь двое!</p>
+        <!-- <button id="modal-dialog-closer">Закрыть</button> -->
+   </dialog>
+    </div>
+    <script>
+       // модальный диалог
+       const modalDialog = document.querySelector('#modal-dialog');
+
+       const modalDialogOpenner = document.querySelector('#modal-dialog-openner');
+       modalDialogOpenner.addEventListener('click', () => {
+            modalDialog.showModal();
+       });
+
+       // модальный диалог 2
+       const modalDialog2 = document.querySelector('#modal-dialog-2');
+
+       const modalDialogOpenner2 = document.querySelector('#modal-dialog-openner-2');
+       modalDialogOpenner2.addEventListener('click', () => {
+            modalDialog2.showModal();
+       });
+    </script>
+    <script src="../../lib//pressed-key-shower/index.js"></script>
+    <script>
+        new PressedKeyShower({ keysToShow: [{ code: 'Escape', caption: 'Escape' }] });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1112,6 +1112,10 @@ <h2 class="place slide_title centered-text">Что по характеристи
         <iframe src="./demos/dialog-modal-and-non-modal-escape/index.html" class="cover width height"></iframe>
     </section>
 
+    <section class="slide">
+        <iframe src="./demos/dialog-modal-in-modal-escape/index.html" class="cover width height"></iframe>
+    </section>
+
     <!-- dialog table - заполняем закрытие на Escape -->
     <section class="slide slide_with-table">
         <div class="diz-table-wrapper diz-table-wrapper_dialog-table">
@@ -1638,6 +1642,32 @@ <h2 class="place slide_title centered-text">Анимация</h2>
         <a href="https://caniuse.com/mdn-css_at-rules_starting-style" class="copyright">Can I use: @strating-style</a>
     </section>
 
+    <section class="slide">
+        <pre class="place">
+            <code class="language-css">
+            /* открытый диалог */
+            dialog {
+                opacity: 1;
+                scale: 1;
+            }
+            </code>
+        </pre>
+    </section>
+
+    <section class="slide">
+        <pre class="place">
+            <code class="language-css">
+            /* открывающийся диалог */
+            @starting-style { 
+                dialog {
+                    opacity: 0; 
+                    scale: 1.1; 
+                }
+            }
+            </code>
+        </pre>
+    </section>
+
     <section class="slide">
         <pre class="place">
             <code class="language-css">