Create full screen dialog using angularjs

A full screen dialog can be created in case you want to show a message to the user or capture some sort of input hiding other details on the page. I have created following angular directive to create a full screen dialog. Any content that we want to include in full screen dialog, its transcluded within the directive tag.

Usage

Launch fullscreen dialog
<button>Open Dialog</button>
Creates the full screen dialog
<fullscreen-dialog>
    <div class="dialog"></div>
</fullscreen-dialog>
Holds the content of the dialog
<fullscreen-dialog>
    <div class="dialog">
        <div class="content"></div>
    </div>
</fullscreen-dialog>
NOTE Id ‘dialog’ is added to body tag to find and add class to it. This can be customised to the following: eg.
$('body').removeClass('noscroll');

Demo

Code