Javascript 在Metro UI中使用对话框_Javascript_Jquery_Dialog_Metro Ui Css

Javascript 在Metro UI中使用对话框

javascript jquery

Javascript 在Metro UI中使用对话框,javascript,jquery,dialog,metro-ui-css,Javascript,Jquery,Dialog,Metro Ui Css,嗨，我有一个关于Metro UI的问题（）我使用的对话框如下所示： <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

嗨，我有一个关于Metro UI的问题（）

我使用的对话框如下所示：

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


简单对话框

Dialog:：Metro UI CSS-前端框架
用于以Windows Metro风格在web上开发项目。

var x#u dialog=$（“#”+dialogId）.data（“dialog”）；
x_dialog.options={
宽度：宽度，
高度:高度,，
关闭按钮：真
}
x_dialog.open（）；

但是对话框没有显示关闭按钮或我想要的宽度/高度

有没有关于Metro UI对话框的有用示例？我还没有找到任何，Metro UI的API看起来不错，但是如果你用对话框搜索JavaScript，你将找不到任何…

首先，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>

希望能有所帮助。

首先，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>

希望有帮助。

中提供了一些选项以帮助您根据自己的喜好自定义对话框。现在你的问题，答案是

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

在中给出了一些选项以帮助您根据自己的喜好自定义对话框。现在你的问题，答案是

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

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