Dialog

@@adsense
Metro UI CSS provides the ability to easily create dialogs. The dialogue can be ANY Your unit, it is sufficient to determine the appropriate role data-role='dialog'. 

                <div data-role="dialog">
                    ...you content here...
                </div>
Example of usage

                <button onclick="showDialog('#dialog')">Show dialog</button>

                <div data-role="dialog" id="dialog">
                    <h1>Simple dialog</h1>
                    <p>
                        Dialog :: Metro UI CSS - The front-end framework
                        for developing projects on the web in Windows Metro Style.
                    </p>
                </div>

                <script>
                    function showDialog(id){
                        var dialog = $(id).data('dialog');
                        dialog.open();
                    }
                </script>

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

Simple dialog

This dialog with default overlay

Simple dialog

This dialog with colored overlay

Simple dialog

This dialog with custom colors

Simple dialog

This dialog will be auto closed after 3 sec

Options

Parameter Data-* Type Default value Description
overlay data-overlay boolean false Show dialog with overlay
overlayClickClose data-overlay-click-close boolean false Close dialog on overlay click
overlayColor data-overlay-color string default Overlay color, hex value or class name
type data-type string default Dialog type: default, success, warning, alert, info
background data-background string default Dialog background color, hex value or class name
color data-color string default Dialog main color for text, hex value or class name
hide data-hide int false If value gt 0 then dialog hide automatically after N ms
width data-width int or string auto Dialog width
height data-height int or string auto Dialog height
show data-show boolean false Auto open Dialog after create
closeButton data-close-button boolean false Show dialog close button
windowsStyle data-windows-style boolean false Show dialog in windows 8 style (full width). Recommended put content in additional div with class .container

Dialog content loaded with ajax


                <div data-role="dialog" id="dialog-ajax" class="padding20"
                    data-close-button="true"
                    data-href="dialog-ajax-demo-data.html"
                    data-width="600"></div>

                <div data-role="dialog" id="dialog-video-content"
                    data-background="bg-dark"
                    data-close-button="true"
                    data-content='<iframe src="https://player.vimeo.com/video/86430443"></iframe>'
                    data-width="600"
                    data-content-type="video"></div>

Dialog place with attribute data-place

Simple dialog

This dialog placed default

Simple dialog

This dialog placed top-left

Simple dialog

This dialog placed top-center

Simple dialog

This dialog placed top-right

Simple dialog

This dialog placed bottom-left

Simple dialog

This dialog placed bottom-center

Simple dialog

This dialog placed bottom-right

Simple dialog

This dialog placed center-left

Simple dialog

This dialog placed center-right

Utility functions

Metro UI CSS provides global utility function for open, close and toggle dialogs.

Simple dialog

This dialog opened with utility function 


                <button class="button" onclick="showMetroDialog('#dialog-uf-1')">Open dialog</button>
                <button class="button" onclick="hideMetroDialog('#dialog-uf-1')">Close dialog</button>
                <button class="button" onclick="toggleMetroDialog('#dialog-uf-1')">Toggle dialog</button>
                <button class="button" onclick="toggleMetroDialog('#dialog-uf-1', 'top-left')">Toggle dialog</button>
                <button class="button" onclick="showMetroDialog('#dialog-uf-1', 'top-left')">Show dialog</button>