Question

您好我对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对话框是否有任何有用的示例？我还没有找到任何来自Metro UI的API看起来不错，但是如果你用Dialogs搜索JavaScript你就找不到...

Answer 1

首先，Metro 3.0一直处于测试阶段，因此可能仍会有所改进。它与2.0相比，它在很大程度上依赖于html5数据属性，因此它可以在html代码上指定，但仍然可以使用.attr（'data- *'，''）等方法在javascript中进行修改。这是一个有效的代码：

    <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上指定它们，或者在js脚本中的click事件上动态设置它们。像这样：

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

showDialog('dialog');
});

希望它有所帮助。

Answer 2

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是您给对话框div的id

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

在Metro UI中使用Dialog

2 个答案: