dialog/modal - HTML

by redky

HTML

<!-- 
    1. http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
    2. http://demo.agektmr.com/dialog/

    dialog:
    open
    autofocus
-->
<dialog id="dialog" open>
    <p>hello world</p>
    <button id="close" autofocus>close</button>
</dialog>

<dialog id="modal">
    <p>You can not click anything else</p>
    <button id="close-modal" autofocus>Close</button>
</dialog>

<button id="launch-modal">Launch Modal</button>
<button id="launch">Launch Me</button>

<div class="box">
    
</div>

CSS

dialog::backdrop {
    background: rgba(0,0,0,0.9);
}

div.box {
    width: 100px;
    height: 100px;
    background-color: #faa;
}

dialog {
    top: 10px;
}

JavaScript

var $ = function( selector, context ) {
    context = context || document;
    return context.querySelector( selector );
};
var $$ = function( selector, context ) {
    context = context || document;
    return context.querySelectorAll( selector );
};


var dialog = $('#dialog');
var box = $( '.box' );

$( '#launch' ).onclick = function(e) {
    dialog.show( e );
};

$( '#close' ).onclick = function() {
    dialog.close( 'ok' );
};

var modal = $( '#modal' );

$( '#launch-modal' ).onclick = function() {
    modal.showModal();
};

$( '#close-modal' ).onclick = function() {
    modal.close();
};

$('dialog').addEventListener( 'close', function(e) {
    alert( this.returnValue );
}, false );