Использование диалога в Metro UI

Привет, у меня есть вопрос по поводу Metro UI ( http://metroui.org.ua/dialog.html)

Я использую диалог, как это:

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

Но диалог не отображается с кнопкой закрытия или моей желаемой шириной / высотой.

Есть ли полезные примеры для диалогов Metro UI? Я не нашел ни одного, и API из Metro UI кажется хорошим, но если вы ищете JavaScript с помощью диалоговых окон, вы не найдете ничего...

Источник

2 ответа

Решение

Прежде всего, метро 3.0 пока находится в бета-версии, поэтому, вероятно, все еще будет улучшено. В отличие от 2.0, он в значительной степени опирается на атрибуты данных html5 и, следовательно, его можно указать в коде html, но все же можно изменить в javascript с помощью таких методов, как.attr('data-*','') . Вот рабочий код:

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

Либо укажите их в html, либо установите его динамически для события click в сценарии js. Что-то вроде этого:

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

showDialog('dialog');
});

Надеюсь, поможет.

Источник

В http://metroui.org.ua/dialog.html есть варианты, которые помогут вам настроить диалог на свой вкус. Теперь ваш вопрос, ответ будет

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

вот и все. Вы можете заменить ширину и высоту значением по вашему выбору

для JavaScript, который поможет открыть и закрыть диалог

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

кнопка или любая ссылка, которая откроет диалог, должна иметь это showDialog('#TestDialog') TestDalog это id вы дали диалоговое окно div

<button onclick="showDialog('#TestDialog')">Show dialog</button>
Источник
Другие вопросы по тегам