Dialog

Toggle dialog
<a href="#" role="button" data-zo-toggle="#dialog" class="zo-btn zo-btn--primary zo--radius">Toggle dialog</a>
...
<div class="zo-dlgContainer" id="dialog">
    <div class="zo-dlgContainer__overlay"></div>
    <div class="zo-dlg zo-dlg--shadowed" role="dialog">
        <a href="#" class="zo-dlg__close" data-zo-close="#dialog"></a>
        <h3 class="zo-dlg__title">Dialog</h3>
        <p>Are you sure?</p>
        <div class="zo-dlg__footer">
            <a href="#" role="button" data-zo-close="#dialog" class="zo-btn zo-btn--primary zo--radius zo-dlg__btn">OK</a>
            <a href="#" role="button" data-zo-close="#dialog" class="zo-btn zo-btn--default zo--radius zo-dlg__btn">Cancel</a>
        </div>
    </div>
</div>
ZoaUI

Dialog
