查阅Metro UI CSS 对组件(对话框)描述，本人觉得已经描述的很详细，所以在这里不打算做详细的讲解，大家可以直接阅读以下源代码（是进过本人已经优化后的代码）。
温馨提示：相关注释，也已经在代码中添加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--metro UI css 样式文件(组件基础)-->
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<!--metro UI css 样式文件(组件基础)-->
<link href="css/modern.css" rel="stylesheet">
<link href="css/modern-responsive.css" rel="stylesheet">
<!--加载jquery js 文件-->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<!--加载metro js 文件-->
<script src="js/metro/metro.min.js"></script>
<!--加载第三方js 文件-->
<script src="js/modern/dropdown.js"></script><!--下拉菜单第三方控件-->
<script src="js/modern/pagecontrol.js"></script><!--多页控件第三方js-->
<script src="js/modern/accordion.js"></script><!--手风琴第三方js-->
<script src="js/modern/buttonset.js"></script><!--button第三方js-->
<script src="js/modern/rating.js"></script><!--评分第三方js-->
<script src="js/modern/carousel.js"></script><!--幻灯片第三方js-->
<script src=""></script>
<title>Modern UI CSS 学习笔记</title>
</head>
<body class="modern-ui" style="background: #f1f1f1">
<div class="page">
<div class="page-header">
<div class="page-header-content">
<h3>Metro UI CSS样式文件之组件（对话框）</h3>
</div>
</div>
<div class="page-region">
<div class="page-region-content">
<p>对话框 Demo</p>
<button id="staticDialog">静态对话框</button>
<button id="draggableDialog">可拖拽对话框/button>
<button id="positionedDialog">绝对定位对话框</button>
<script type="text/javascript" src="js/modern/dialog.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#staticDialog').click(function(e) {
$.Dialog({
'title' : 'My static dialog',
'content' : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
'buttons' : {
'Ok' : {
'action': function(){}
},
'Cancel' : {
'action': function(){}
}
}
});
});
$('#draggableDialog').click(function(e) {
$.Dialog({
'title' : 'My draggable dialog',
'content' : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
'draggable' : true,
'buttonsAlign': 'right',
'buttons' : {
'Ok' : {
'action': function(){}
}
}
});
});
$('#positionedDialog').click(function(e) {
$.Dialog({
'title' : 'My right dialog',
'content' : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
'draggable' : true,
'closeButton': true,
'position' : {
'zone' : 'right'
},
'buttons' : {
'Ok' : {
'action': function(){}
},
'Retry' : {
'action': function(){}
},
'Cancel' : {
'action': function(){}
}
}
});
});
});
</script>
<h2>参数</h2>
<ul class="unstyled">
<li><b>title</b> - 对话框的标题(HTML格式)</li>
<li><b>content</b> - 对话框的内容 (HTML 格式)</li>
<li><b>draggable</b> - 设置对话框是否可被拖拽，可选值为: <i>true, false</i> (默认: false)</li>
<li><b>overlay</b> - 设置页面的覆盖层 (设置为false时只是不显示覆盖层的效果，div还是会存在), 可选值为: <i>true, false</i> (默认: true)</li>
<li><b>closeButton</b> - 启用还是禁用close按钮，可选值为: <i>true, false</i> (默认: false)</li>
<li><b>buttonsAlign</b> - 按钮的排列位置，可选值为: <i>left, center, right</i> (默认: center)</li>
<li>
<b>buttons</b> - 设置在功能条上出现的按钮 (JSON 格式)
<ul class="unstyled" style="margin-left: 20px;">
<li>
<b>name</b> - 按钮上显示的文本 (JSON 格式)
<ul class="unstyled" style="margin-left: 20px;">
<li><b>action</b> - 绑定到按钮上的动作</li>
</ul>
</ul>
</li>
<li>
<b>position</b> - 设置对话框的初始位置 (JSON 格式)
<ul class="unstyled" style="margin-left: 20px;">
<li><b>zone</b> - 对话框出现的区域，可选值为: <i>left, center, right</i> (默认: center)</li>
<li><b>offsetY</b> - 距离上边缘的距离（单位：像素）</li>
<li><b>offsetX</b> - 距离左边缘的距离（单位：像素）</li>
</ul>
</li>
</ul>
<h2>Javascript</h2>
<p>在文档的head部分包含 <code>dialog.js</code>文件</p>
</div>
</div>
</body>
</html>
