Новый элемент Dialog для HTML5

Pirat 7.10.2018 Статьи 0 комментариев

В обновленном HTML 5.2 появился совершенно новый элемент под именем dialog, где теперь через него можно создать модальное окно на сайте. Что также его можно сделать интерактивными, где будет присутствовать небольшое количество jаvascript. Также теперь можно создавать особо сложное приложение под программу браузера. Так как на приложение или на сайте всегда присутствует диалоговое окно, то какой сложности оно будет.

Есть такие, что просто несут информацию, но также в большинстве можно увидеть такие функций, где нужно выбрать тот или иной элемент и все это подтвердить. Точнее в такой форме будет полноценная функция, где будет привлекаться разные действие, что создано с помощью чистого HTML5.

По поводу стилистике, то здесь без использования CSS, где будет выглядеть не очень привлекательным. Аналогично и про jаvascript, который потребуется для открытия. Здесь нужно понимать, что внутри самого элемента будет использоваться совершенно другие элементы, где станет структурировать ваше диалоговую форму и построить его в соответствии с вашими требованиями. Где можно теоретически предположить, что для вашего воображение не будет пределов.

Давайте рассмотрим одну созданную функцию, которая создана с помощью элемента Dialog.

HTML

<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Любимые животные:</label>
      <select id="favAnimal">
        <option></option>
        <option>Котики</option>
        <option>Панды</option>
        <option>Обезьяны</option>
      </select></p>
    </section>
    <button id="cancel" type="reset">Закрыть</button>
    <button type="submit">Подтвердить</button>
  </form>
</dialog>

<div class="center">
  <button id="updateDetails">Показать диалог</button>
</div>

CSS

.center {
  width:150px;
  margin:0 auto;
}

(function() {
    var updateButton = document.getElementById('updateDetails');
    var cancelButton = document.getElementById('cancel');
    var favDialog = document.getElementById('favDialog');
 
    // Обработчик нажатия на кнопку - открытие диалога
    updateButton.addEventListener('click', function() {
      favDialog.showModal();
    });

    // Обработчик закрытия диалога
    cancelButton.addEventListener('click', function() {
      favDialog.close();
    });
    
 })();

[center][/center]