dialog简介
对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过 ‘x’ 图标关闭。
如果内容长度超过最大高度，一个滚动条会自动出现。
一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。
简介部分摘抄自https://www.runoob.com/jqueryui/api-dialog
基本使用
下面的一个例子，可以展示dialog的基本使用。dialog的使用依赖于jquery和jquery-ui，所以要在head里面导入。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对话框部件（Dialog Widget）演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false,
buttons:[
{text:"确定",click:function(){$(this).dialog("close");}}
]
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>其实dialog的对话框本质上是一个div标签，如上面代码中的<div id="dialog" title="对话框标题">我是一个对话框</div>。而我们可以通过dialog对这个div标签进行设置，对应着上面的代码为：
$( "#dialog" ).dialog({ autoOpen: false，
buttons[
{text:“确定",cilck:function(){$(this).dialog("close")}}
]});在设置里面，autoOpen为设置是否自动打开对话框，如果为true，则在代码加载完成后就会打开对话框，由于在上面代码里面绑定了打开对话的单击事件，所以设置为了false。
buttons为设置按钮，可以设置多个按钮，只要把{text:“确定",cilck:function(){$(this).dialog("close")}}多写几个，并用逗号隔开。
在dialog里面可以设置很多属性，具体怎么使用大家可以去看看这份文档：https://api.jqueryui.com/dialog/
按钮颜色的设置
dialog中的按钮的字体颜色和按钮的背景色，以及按钮框的样式是默认在jquery-ui中设置好的，比如上面的对话框按钮样式为：
当我们想更改按钮的颜色时候，如果去jquery-ui中去修改的话，可以能会影响其他的弹框。那如何才能对这一个对话框的按钮的样式进行设置呢？
在网上一直没找到好的方法，于是我根据自己对jquery的理解，自己做了像下面的修改：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对话框部件（Dialog Widget）演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false,
buttons:[
{text:"确定",click:function(){$(this).dialog("close");},class:"button1"}
]
});
$(".button1").css("background","red");
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>也就是在按钮里，增加了一个class属性button1，{text:"确定",click:function(){$(this).dialog("close");},class:"button1"} 然后，通过jquery的方式修改css属性$(".button1").css("background","red");。结果按钮的背景色变为了红色：
当然，也可以通过这种方式去设置其他的属性样式。另外，需要注意的是，设置背景色的键值为"background“，而不是"backgroundColor“，因为在jquery-ui中是在background中设置了按钮的背景颜色，使用"backgroundColor“无法覆盖jquery-ui中的默认值。
