easyui dialog 一文读懂dialog基本使用方法

easyui dialog 是easyui中的弹出框组件，使用该组件可以做出弹出框效果，方便使用。

1.创建方式：
（1）html方式：
只需要在div中加入class名easyui-dialog.

<div class='easyui-dialog' data-options="modal:true,closed:true"></div>

(2)js方式

<div id="dlg"></div>//html代码

$('#dlg').dialog({
title:'添加信息',//弹出框的标题
modal:true,//模态框
closed:true,//默认弹出框关闭
width:400,//弹出框宽度
height:200,//弹出框高度
buttons:'#xx'//弹出框底部按钮。#xx代表按钮所在的div。
})

个人觉得用html方式创建，好用点。

假设项目中需要点击按钮弹出框，这样一个需求。下面写个例子。

点击按钮打开弹出框。应用到的知识有：
1.设置closed属性为true，
2.使用dialog的open方法，打开弹出框。
3.完成操作之后，使用dialog的close方法

<!--div盒子 -->
<div id='dlg' data-options="modal:true closed:true">
</div>
<!--按钮 -->
<button id="btn">点击</button>

$('#btn').on('click',function(){
$('#dlg').dialog('open').dialog('setTitle','添加信息');//setTitle方法，设置dialog的标题，同title

})