在 Metro UI 中使用对话框答案

【问题标题】：Using a Dialog in Metro UI在 Metro UI 中使用对话框
【发布时间】：2015-07-23 02:28:36
【问题描述】：

您好，我有一个关于 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 看起来不错，但如果您正在搜索带有对话框的 JavaScript，您将找不到任何...

【问题讨论】：

标签： javascript jquery dialog metro-ui-css

【解决方案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 脚本中的点击事件上动态设置它们。像这样的：

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

showDialog('dialog');
});

希望对你有帮助。

【讨论】：

【解决方案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 是id 你给对话框div

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

【讨论】：