Работа в конкретном блоке.
Я хочу сказать скрипту.Работать нужно так. Если нажать кнопку открыть в конкретном блоке, то открыть модальное окно в этот блоке.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .blok { max-width: 280px; margin: 30px 0px 30px 0px; } .zagolovok { font-size: 24px; margin: 0px 0px 10px 0px; } .modal__open { cursor: pointer; color: dodgerblue; } .modal { display: none; margin: 30px 0px 30px 0px; } .modal__close { cursor: pointer; margin: 30px 0px 30px 0px; color: dodgerblue; } .modal__tekst { font-size: 14px; } .open{ display: block; } </style> </head> <body> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <script> let modal__open = document.querySelector(".modal__open"); let modal__close = document.querySelector(".modal__close"); let modal = document.querySelector(".modal"); let modal__fun = () => { modal.classList.add("open"); } modal__open.addEventListener("click", modal__fun); let modal__fun__2 = () => { modal.classList.remove("open"); } modal__close.addEventListener("click", modal__fun__2); </script> </body> </html> |
Сергей Ракипов,
цикл по блокам, внутри цикла ваш код, только вместо document будет блок. дерзайте, если не выйдет цветок, пишите код попытки.))) С Наступающим!!! |
рони,
я понял сейчас сделаю |
рони,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .blok { max-width: 280px; margin: 30px 0px 30px 0px; } .zagolovok { font-size: 24px; margin: 0px 0px 10px 0px; } .modal__open { cursor: pointer; color: dodgerblue; } .modal { display: none; margin: 30px 0px 30px 0px; } .modal__close { cursor: pointer; margin: 30px 0px 30px 0px; color: dodgerblue; } .modal__tekst { font-size: 14px; } .open{ display: block; } </style> </head> <body> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <script> let modal__open = document.querySelector(".modal__open"); let modal__close = document.querySelector(".modal__close"); let modal = document.querySelectorAll(".modal"); for(var i = 0; i < modal.length; i++){ let modal__fun = () => { modal.classList.add("open"); } modal__open.addEventListener("click", modal__fun); let modal__fun__2 = () => { modal.classList.remove("open"); } modal__close.addEventListener("click", modal__fun__2); console.log(i) } </script> </body> </html> вот сделал цикл а выходит ошибка |
не сработало Просто не понимаю как ему сказать что мне нужно |
открывашка делегирование
Сергей Ракипов,
итак дубль 500... (смотреть остальные версии , поиск на форуме по слову открывашка) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .blok { max-width: 280px; margin: 30px 0px 30px 0px; } .zagolovok { font-size: 24px; margin: 0px 0px 10px 0px; } .modal__open { cursor: pointer; color: dodgerblue; } .modal { display: none; margin: 30px 0px 30px 0px; } .modal__close { cursor: pointer; margin: 30px 0px 30px 0px; color: dodgerblue; } .modal__tekst { font-size: 14px; } .open { display: block; } </style> </head> <body> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <div class="blok"> <div class="zagolovok">Заголовок</div> <div class="modal__open">Открыть</div> <div class="modal"> <div class="modal__close">Закрыть</div> <div class="modal__tekst"> Модальное окно <br> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> </div> </div> <script> for (let blok of document.querySelectorAll(".blok")) { let modal = blok.querySelector(".modal"); blok.addEventListener("click", ({ target }) => { if (target.closest(".modal__open")) modal.classList.add("open"); if (target.closest(".modal__close")) modal.classList.remove("open"); }); } </script> </body> </html> |
Цитата:
for (const blok of document.querySelectorAll(".blok")) { const modal = blok.querySelector(".modal"); const open = blok.querySelector(".modal__open"); const close = blok.querySelector(".modal__close"); open.addEventListener("click", () => modal.classList.add("open")); close.addEventListener("click", () => modal.classList.remove("open")); } |
рони,
Спасибо в 500 раз. Я вот смотрю уроки и вроде все понятно в теории. А когда дело до практики доходит не получается |
Я понял вот эту часть кода
of этот типа массива И понял вот это blok.querySelector я не знал что так можно писат |
Я каждый символ на десять раз поверил и не понимаю почему не работает и ошибки нет.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; max-height: 0px; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } </style> </head> <body> <button class="collapsible">Open Collapsible</button> <div class="content"> Лишь явные признаки победы институционализации неоднозначны и будут смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности. В своём стремлении повысить качество жизни, они забывают, что экономическая повестка сегодняшнего дня обеспечивает широкому кругу (специалистов) участие в формировании инновационных методов управления процессами. Сложно сказать, почему многие известные личности будут объявлены нарушающими общечеловеческие нормы этики и морали. </div> <script> let coll = document.querySelector(".collapsible"); // let content = document.querySelector(".content"); for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); let content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px" } }) } </script> </body> </html> |
Часовой пояс GMT +3, время: 18:26. |