Исправляет закрытие по Esc в рецепте "Попап" (#5477)

* Добавлет обработку закрытия по ESC Заменяет вызовы при закрытии * Корректирует код демо согласно описания Объединяет идентичные стили * Исправляет запись RGB-цвета, добавляет ссылку * Добавляет название события --------- Co-authored-by: Alena Batitskaia <[email protected]> Co-authored-by: Tatiana Fokina <[email protected]>
doka-guide · Aug 5, 2024 · 19ca0dc · 19ca0dc
1 parent 0ce2415
commit 19ca0dc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/recipes/popup/demos/popup-demo/index.html b/recipes/popup/demos/popup-demo/index.html
@@ -110,7 +110,9 @@
       transition: background-color 0.2s linear;
     }
 
-    .closeDialogBtn:hover {
+    .closeDialogBtn:hover,
+    .closeDialogBtn:focus,
+    .closeDialogBtn:focus-visible {
       border: 2px solid #000000;
     }
 
@@ -119,19 +121,11 @@
       outline: none;
     }
 
-    .closeDialogBtn:focus-visible {
-      border: 2px solid #000000;
-    }
-
     .button:focus {
       border: 2px solid #FFFFFF;
       outline: none;
     }
 
-    .closeDialogBtn:focus {
-      border: 2px solid #000000;
-    }
-
     .button-violet {
       background-color: #C56FFF;
     }
@@ -141,7 +135,7 @@
     }
 
     dialog::backdrop {
-      background-color: rgba(0, 0, 0, 0.8);
+      background-color: rgb(0 0 0 / 0.8);
     }
 
     .scroll-lock {
@@ -190,14 +184,13 @@ <h2>Дока — самая добрая документация &#128579</h2>
   <script>
     const dialog = document.getElementById('myDialog')
     const dialogOpener = document.querySelector('.openDialogBtn')
-    const dialogCloser = document.querySelector('.closeDialogBtn')
+    const dialogCloser = dialog.querySelector('.closeDialogBtn')
 
     function closeOnBackDropClick({ currentTarget, target }) {
       const dialog = currentTarget
       const isClickedOnBackDrop = target === dialog
       if (isClickedOnBackDrop) {
-        dialog.close()
-        returnScroll()
+        close()
       }
     }
 
@@ -216,6 +209,9 @@ <h2>Дока — самая добрая документация &#128579</h2>
     }
 
     dialog.addEventListener('click', closeOnBackDropClick)
+    dialog.addEventListener('cancel', (event) => {
+      returnScroll()
+    });
     dialogOpener.addEventListener('click', openModalAndLockScroll)
     dialogCloser.addEventListener('click', (event) => {
       event.stopPropagation()

diff --git a/recipes/popup/index.md b/recipes/popup/index.md
@@ -115,7 +115,7 @@ dialog {
 }
 
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 0.8);
 }
 
 .scroll-lock {
@@ -128,13 +128,13 @@ dialog::backdrop {
 ```javascript
 const dialog = document.getElementById('myDialog')
 const dialogOpener = document.querySelector('.openDialogBtn')
-const dialogCloser = document.querySelector('.closeDialogBtn')
+const dialogCloser = dialog.querySelector('.closeDialogBtn')
 
 function closeOnBackDropClick({ currentTarget, target }) {
   const dialog = currentTarget
   const isClickedOnBackDrop = target === dialog
   if (isClickedOnBackDrop) {
-    dialog.close()
+    close()
   }
 }
 
@@ -153,6 +153,9 @@ function close() {
 }
 
 dialog.addEventListener('click', closeOnBackDropClick)
+dialog.addEventListener('cancel', (event) => {
+  returnScroll()
+});
 dialogOpener.addEventListener('click', openModalAndLockScroll)
 dialogCloser.addEventListener('click', (event) => {
   event.stopPropagation()
@@ -212,11 +215,11 @@ dialog {
 }
 ```
 
-Встроенной функцией тега `<dialog>` является его подложка. Она появляется в момент открытия попапа и имеет название `::backdrop`. С помощью этого псевдоэлемента мы можем стилизовать задник модального окна, а также реализовать его закрытие по клику на оверлей. Первое реализуем с помощью правил CSS — добавим затемнение на экран за открытым попапом:
+Встроенной функцией тега `<dialog>` является его подложка. Она появляется в момент открытия попапа и имеет название [`::backdrop`](/css/backdrop/). С помощью этого псевдоэлемента мы можем стилизовать задник модального окна, а также реализовать его закрытие по клику на оверлей. Первое реализуем с помощью правил CSS — добавим затемнение на экран за открытым попапом:
 
 ```css
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 0.8);
 }
 ```
 
@@ -245,7 +248,7 @@ body {
 ```javascript
 const dialog = document.getElementById('myDialog')
 const dialogOpener = document.querySelector('.openDialogBtn')
-const dialogCloser = document.querySelector('.closeDialogBtn')
+const dialogCloser = dialog.querySelector('.closeDialogBtn')
 ```
 
 Напишем функции для открытия и закрытия попапа. Также поместим в них код, необходимый для блокировки скролла страницы. Не забудем вернуть скролл обратно при закрытии попапа:
@@ -283,12 +286,14 @@ function closeOnBackDropClick({ currentTarget, target }) {
   const dialog = currentTarget
   const isClickedOnBackDrop = target === dialog
   if (isClickedOnBackDrop) {
-    dialog.close()
-    returnScroll()
+    close()
   }
 }
 
 dialog.addEventListener('click', closeOnBackDropClick)
+dialog.addEventListener('cancel', (event) => {
+  returnScroll()
+});
 ```
 
-Другой функцией нашего попапа окажется его закрытие по нажатию на клавишу <kbd>Esc</kbd>. Это является встроенной функцией элемента `<dialog>` и не требует дополнительного кода.
+Другой функцией нашего попапа окажется его закрытие по нажатию на клавишу <kbd>Esc</kbd>. Это является встроенной функцией элемента `<dialog>` и не требует дополнительного кода. Несмотря на то, что закрытие произойдёт автоматически, нам нужно знать об этом событии, чтобы вернуть скролл. Для этого добавим обработку события 'cancel'.