Новый элемент Dialog для HTML5 страницы
 | |
| В обновленном HTML 5.2 появился совершенно новый элемент под именем dialog, где теперь через него можно создать модальное окно на сайте. Что также его можно сделать интерактивными, где будет присутствовать небольшое количество JavaScript. Также теперь можно создавать особо сложное приложение под программу браузера. Так как на приложение или на сайте всегда присутствует диалоговое окно, то какой сложности оно будет. Есть такие, что просто несут информацию, но также в большинстве можно увидеть такие функций, где нужно выбрать тот или иной элемент и все это подтвердить. Точнее в такой форме будет полноценная функция, где будет привлекаться разные действие, что создано с помощью чистого HTML5. По поводу стилистике, то здесь без использования CSS, где будет выглядеть не очень привлекательным. Аналогично и про JavaScript, который потребуется для открытия. Здесь нужно понимать, что внутри самого элемента будет использоваться совершенно другие элементы, где станет структурировать ваше диалоговую форму и построить его в соответствии с вашими требованиями. Где можно теоретически предположить, что для вашего воображение не будет пределов. Давайте рассмотрим одну созданную функцию, которая создана с помощью элемента Dialog. Приступаем к установке: HTML Код <dialog id="goinposarous"> <form method="dialog"> <section> <p><label for="favAnimal">ZorNet.Ru- портал:</label> <select id="favAnimal"> <option></option> <option>Коды</option> <option>Скрипты</option> <option>Стили</option> </select></p> </section> <button id="nadorusog" type="reset">Закрыть</button> <button type="submit">Подтвердить</button> </form> </dialog> <div class="levan-weets"> <button id="atemodasalog">Показать диалог</button> </div> CSS Код .levan-weets { width:148px; margin:0 auto; } JS Код (function() { var updateButton = document.getElementById('atemodasalog'); var cancelButton = document.getElementById('nadorusog'); var goinposarous = document.getElementById('goinposarous'); updateButton.addEventListener('click', function() { goinposarous.showModal(); }); cancelButton.addEventListener('click', function() { goinposarous.close(); }); })(); Получается так, где при добавлении атрибута, будет открываться диалоговое окно, что метод удаляет атрибут, что сразу последует закрытие Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |