[SOLVED] Using a Dialog in Metro UI

Using a Dialog in Metro UI

Hi I have a question about the Metro UI (http://metroui.org.ua/dialog.html)

I'm using the dialog like this:

<div id="TestDialog" data-role="dialog" class="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 type="text/javascript">

var x_dialog = $("#" + dialogId).data("dialog");

x_dialog.options = {
    width: width,
    height: height,
    closeButton: true
}

x_dialog.open();
</script>

But the Dialog isn't showing with a close button or my desired width / height.

Are there any useful examples for Metro UI dialogs? I haven't found any and the API from Metro UI seems nice, but if you're searching for JavaScript with Dialogs you wont find any...

Solution

first of all the metro 3.0 is till in beta so it will probably still be improved. It contrast to 2.0 it relies heavily on html5 data attributes and hence it can be specified on the html code but can still be modified in the javascript by using methods like the .attr('data-*','') . Here is a working code:

    <script>
        function showDialog(id){
            var dialog = $("#"+id).data('dialog');
            if (!dialog.element.data('opened')) {
                dialog.open();
            } else {
                dialog.close();
            }
        }
    </script>

</head>
<body onload="init()">
    <div class="container page-content">

        <div class="padding20 no-padding-right no-padding-left no-padding-top">
            <button class="button" onclick="showDialog('dialog')">Show dialog</button>
        </div>

        <div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200">
            <h1>Simple dialog</h1>
            <p>
                test
        </div>

    </div>

</body>
</html>

Either specify them on the html or have it set dynamically on the click event in the js script. Something like this:

$('.button').click(function () {
$('#dialog').attr('data-width','200');
$('#dialog').attr('data-height','200');

showDialog('dialog');
});

Hope it helps.