CodePen Embed - nu-dialog-js

    <form id="modalForm">
        <p>
            <select id="modalPositionSel" name="position">
                <option value="_middle">middle</option>
                <option value="_top">top</option>
                <option value="_right">right</option>
                <option value="_bottom">bottom</option>
                <option value="_left">left</option>
            </select>
        </p>
        <button type="submit">show dialog</button>
    </form>
    <div id="nu_dialog_root">
        <dialog tabindex="-1" id="dialog" class="nu_dialog_wrap">
            <button id="mask" title="mask" class="nu_dialog_mask"></button>
            <section class="nu_dialog">
                <button id="close" title="close" class="nu_dialog_close">&times;</button>
                <h3>title of dialog</h3>
                <p>
                    content of dialog
                </p>
            </section>
        </dialog>
    </div>

body, html{
  height: 100%;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

        (function() {
            var domModalForm= document.getElementById('modalForm');
            var domModalPositionSel= document.getElementById('modalPositionSel');
            var domDialog=document.getElementById('dialog');
            var domMask = document.getElementById('mask');
            var domClose = document.getElementById('close');
            domModalForm.addEventListener('submit',function (e) {
                e.preventDefault();
                var classBase='nu_dialog_wrap '+ domModalPositionSel.value;
                domDialog.setAttribute('class', classBase);
                domDialog.setAttribute('open', true);
            });
            domMask.addEventListener('click',function(e) {
                domDialog.removeAttribute('open', false);
            });
            domClose.addEventListener('click', function (e) {
                domDialog.removeAttribute('open');
            });
        })();

This Pen is owned by ziven27 on CodePen.

See more by @ziven27 on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.