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