Атрибут open тега <dialog> — показати діалогове вікно

HTML

<h3>Приклад використання атрибуту <code>open</code></h3> 
<button id="openDialog">Відкрити вікно</button>
  <dialog open="open">
   <p>HTML тег dialog створює діалогове вікно.

Тег dialog дозволяє легко створювати спливаючі або модальні вікна на веб-сторінці.</p>
   <p><button id="closeDialog">Закрити вікно</button></p>
  </dialog>

CSS

body {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
   }
   dialog {
    background: rgba(255, 255, 255, 0.7);
    width: 300px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
   }

JS

var dialog = document.querySelector('dialog');
document.querySelector('#openDialog').onclick = function () {
  dialog.show();
};
document.querySelector('#closeDialog').onclick = function () {
  dialog.close();
};
//# sourceURL=pen.js

HTML

<p class="cap">1. Без open — вікна на сторінці немає, абзаци видно всі</p>
<div class="stage">
    <p class="row">Перший абзац сторінки.</p>
    <p class="row">Другий абзац: зверніть увагу, він іде відразу за першим.</p>
    <p class="row">Третій абзац. Місця під вікно в потоці не відведено.</p>
    <dialog class="d">Без open — цього тексту на сторінці немає</dialog>
</div>

<p class="cap">2. open — вікно видно, але рамка навколо не побільшала й вікно вилізло
    за її межу: воно position: absolute і місця в потоці не займає</p>
<div class="stage">
    <p class="row">Перший абзац сторінки.</p>
    <p class="row">Другий абзац: зверніть увагу, він іде відразу за першим.</p>
    <p class="row">Третій абзац. Місця під вікно в потоці не відведено.</p>
    <dialog class="d" open>open — вікно видно</dialog>
</div>

<p class="cap">3. open="false" — те саме: значення логічного атрибута не важить</p>
<div class="stage">
    <p class="row">Перший абзац сторінки.</p>
    <p class="row">Другий абзац: зверніть увагу, він іде відразу за першим.</p>
    <p class="row">Третій абзац. Місця під вікно в потоці не відведено.</p>
    <dialog class="d" open="false">open="false" — теж відкрито</dialog>
</div>

<p class="note">Затемнення позаду немає, Esc нічого не закриває, а по абзацах під вікном
    можна клацати й ходити табом: вікно, відкрите атрибутом, не модальне.</p>

<p class="cap">4. Закрити без скрипта: форма з method="dialog"</p>
<dialog class="d flow" open>
    <p>Кнопка нижче закриє це вікно й покладе своє value в returnValue.</p>
    <form method="dialog">
        <button value="ok">Закрити (method="dialog")</button>
    </form>
</dialog>

CSS

.cap {
    margin: 20px 0 6px;
    max-width: 620px;
    color: #5a6472;
    font-size: .92em;
}

.stage {
    position: relative;
    max-width: 620px;
    min-height: 130px;
    padding: 10px 12px;
    border: 2px dashed #b9c6d8;
    background: #f6f9ff;
}

.row {
    margin: 4px 0;
}

.d {
    border: 2px solid #2f6fd0;
    background: #fff;
}

.note {
    max-width: 620px;
    margin: 16px 0;
    color: #5a6472;
    font-size: .92em;
}

.flow {
    position: static;
    max-width: 460px;
}

button {
    padding: 6px 12px;
    font: inherit;
}