CODEWITHSUNDEEP
javascriptjquerydialogmetro-ui-css
Luca
Luca

Reputation: 1826

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...

Upvotes: 1

Views: 5121

Answers (2)

Transformer
Transformer

Reputation: 3760

There are options given there in http://metroui.org.ua/dialog.html to help you customize the dialog to your taste. Now your Question, the answer would be 

<div id="TestDialog" data-role="dialog" class="Dialog" data-close-button="true" data-width="300" data-height="300">

thats it. you can replace the width and height with an value of your choice

for the javascript that will help open and close the dialog 

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

the button or whatever link that will open the dialog should have this showDialog('#TestDialog') the TestDalog is the id you gave the dialog div 

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

Upvotes: 2

Estarossa
Estarossa

Reputation: 605

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.

Upvotes: 2

Related Questions