Basic Dialog
http://www.jeasyui.net/demo/519.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Dialog - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Dialog</h2>
<p>Click below button to open or close dialog.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
The dialog content.
</div>
</body>
</html>
========
EasyUI Dialog 对话框
http://www.jeasyui.net/plugins/181.html
扩展自 $.fn.window.defaults。通过 $.fn.dialog.defaults 重写默认的 defaults。
对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化
maximizable，等等）。
依赖
window
linkbutton
用法
通过标记从已有的 DOM 节点创建对话框（dialog）。下面的实例演示了一个带有可调整尺寸特性的模态对话框。
使用 javascript 创建对话框（dialog）。现在让我们创建一个模态对话框，然后调用 ‘refresh’ 方法来通过 ajax 加载它的内容。
========
easyUI创建dialog弹框
https://www.cnblogs.com/mr-wuxiansheng/p/6212457.html
1.在当前页面必须有一个DIV
<div id="dialog-alarm-detail"></div>
2.DIV这个可以弹出对话框
//DIV对象
var detailLog= $(’#dialog-alarm-detail’).dialog(
{
title: ‘保证金明细详情’,
width: ‘60%’,
height:‘60%’,
modal: true,
closable:true,
href: parent.parent.baseUrl+“customer/bail/bailInfo”,
3.通过web端的跳转到html页面
/**
* 进入到保证金明细的详情查询的页面
*
*/
@RequestMapping(value = "bailInfo")
public String bailInfo(Model model) {
return "user/bail/bailInfo";
}
4.在用html页面里面的元素，接收返回的内容
onLoad: function () {
$.ajax({
type: “POST”,
async: false,
success: function (result) {
//新创建的格式化的表格
$(’#detail’).datagrid({
idField : ‘id’, // 只要创建数据表格 就必须要加 ifField
// title : ‘保证金明细详情’,
width: ‘100%’,
height:‘100%’,
url : parent.parent.baseUrl+‘customer/bail/bailDetailsInfo?customerId=’+customerId+’&&bailClass=’+bailClass+’&&agencyId=’+agencyId,
method : ‘GET’,
fitColumns : true,
striped : true, // 隔行变色特性
nowrap : false,
loadMsg : ‘数据正在加载,请耐心的等待…’,
rownumbers : true,
sortName : ‘crtTime’,
sortOrder : ‘desc’,
rowStyler : function(index, record) {},
columns : [ [{
field : ‘updTime’,
title : ‘冻结时间’,
width : 50,
align : ‘center’,
}, {
field : ‘bailStatus’,
title : ‘保证金冻结状态’,
width : 50,
align : ‘center’,
formatter : statusFot
}, {
field : ‘lockBail’,
title : ‘保证金冻结金额’,
width : 80,
align : ‘center’
}, {
field : ‘goodsName’,
title : ‘拍卖名称’,
width : 80,
align : ‘center’
}]],
pagination : false,
pageSize : 10,
pageList : [ 5, 10, 15, 20, 50 ],
});
}
});
},
buttons : [ {
text : "关闭",
handler : function() {
detailLog.dialog('close');
}
} ]
});
5.通过width和hight调整样式
========
Easyui 创建dialog的两种方式，以及他们带来的问题
$(’#yy’).dialog(‘open’);//打开dialog
这地方要注意，加入你关闭窗口的地方使用KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲yy').dialog('de…(’#yy’).dialog
(‘close’);close即是把当前窗口隐藏，但没有销毁，所以你可能遇到的问题就是，下次再次打开这个窗口的时候，里面还是上次的内容。如果使用destroy，那么整个dialog组件都被销毁了，所以只能使用第一次，第二次再怎么点也没用。那有解决的办法吗，肯定是有
的。
方法二：
dialog的第二种创建方式就是，创建一个临时的对话窗口，不用在jsp写个div啥的。直接在js中写就可以了，如下
$(’
…//添加一些属性，比如加载，按钮等
}
这地方关闭的时候可以destroy了
我在最外层的div中写个overflow：hidden，目的就是让下面的内容超出框架后，使用滚动条，但大家要注意，使用滚动条，最起码这个框架的位置得是固定的吧，即需要在div外层的div给一个postion=relative啊，当然firefox和谷歌只要不是IE内核的，即使你这地方
没有固定位置也没问题，人家浏览器强大嘛。但问题就在IE中，不理你这套，必须按照规矩来，那怎么办呢，反正我是弄了很久。
方法一：放弃使用临时dialog，即第二种创建方式，使用第一种创建方式，但每次打开一个dialog都要刷新才能用，太蛋疼啦。
方法二：很简单
$(’
…//添加一些属性，比如加载，按钮等
}
对就只要在上面的 div后面加个style="position:relative“就搞定了，希望这能帮助在兼容性折磨下的你吧
转自：http://www.ithao123.cn/content-5611961.html
dialog创建方法有两种，一种就是直接 (“#test”).dialog().第一种方法在关闭过后，div就会消失，而第二种方法在关闭过后，div仍然存在，但是使用destroy方法后，会使
这个div方法不可用.
使用第二种关闭dialog，直接$(id).dialog(“close”)就可以直接关闭
主要说的是第二种，在第二种当中，如果是要在定义的按钮事件中执行关闭操作的话，可以这样写
$(this).closest(.window-body).dialog(“close”)
如果是在dialog事件中关闭dialog可以这样写
(“#add”).dialog(“close”)关闭，所以$(this).closest(.window-body).dialog(“close”)也可以关闭
========
jquery easyui dialog不超出父容器以及随浏览器缩放
https://blog.csdn.net/tnjun123456/article/details/7204224
code:
<style type="text/css">
body{width:100%;height:100%;}
TABLE{WIDTH:100%;}
#divDialog{padding:5px;}
</style>
<script type="text/javascript">
function fixWidth(percent){
return document.body.clientWidth * percent;
}
function openDivDialog(){
$("#divDialog").dialog("open");
}
function closeDivDialog(){
$("#divDialog").dialog("close");
}
$(function(){
$(window).resize(function(){
$("#divDialog").dialog({
width:fixWidth(0.4)
});
});
$("#divDialog").dialog({
title:"对话框",
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
//modal:true, 是否是模式对话框
width:fixWidth(0.4),
height:200,
//fitColumns:true,适应父容器的大小
doSize:true,
toolbar:[{
text:"Add",
iconCls:"icon-add",
handler:function(){
alert("这是单击add按钮事件");
}
},"-",{
text:"save",
iconCls:"icon-save",
handler:function(){
alert("这是单击save按钮事件");
}
}],
buttons:[{
text:"Ok",
iconCls:"icon-ok",
handler:function(){
alert("这是单击ok按钮事件"+$("#divDialog"));
}
},{
text:"Cancle",
handler:function(){
alert("这是单击cancle按钮事件,关闭dialog");
$("#divDialog").dialog("close");
}
}],
//事件绑定
onMove:function(left,top){
var right，bottom;
//alert($("body").width()+"---"+left +"----"+ $("#divDialog").width()+"="+($("#divDialog").width()+left));
var bodyWidth = $("body").width();
var bodyHeight = $("body").height();
var dialogwidth = $("#divDialog").width();
var dialogHeight = $("#divDialog").height();
if(left < 0){
$("#divDialog").dialog("move",{left:0,top:top});
}else if((left + dialogwidth) > (bodyWidth - 50)){
right = bodyWidth - dialogwidth - 50;
$("#divDialog").dialog("move",{left:right,top:top});
}
if(top < 0){
$("#divDialog").dialog("move",{left:left,top:0});
}else if(top > (bodyHeight - dialogHeight - 50 )){
bottom = bodyHeight - dialogHeight - 50;
$("#divDialog").dialog("move",{left:left,top:bottom});
}
}
});
});
</script>
</head>
<body onresize="openDivDialog();">
<h1>Dialog</h1>
<div>
<a href="#" onclick="openDivDialog();">open</a>
<a href="#" onclick="closeDivDialog();">close</a>
</div>
<div id="divDialog" icon="icon-save">
<TABLE>
<TR align="center" bgColor="#dcdcdc">
<TD>用户编号</TD>
<TD>试用时间</TD>
<TD>转正时间</TD>
<TD>性别</TD>
<TD>姓名拼音</TD>
<TD>生日时间</TD>
<TD>民族</TD>
<TD>身高</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000001</TD>
<TD>1997-3-13 0:00:00</TD>
<TD>1997-3-13 0:00:00</TD>
<TD>1</TD>
<TD>WZJ</TD>
<TD>1965-3-13 0:00:00</TD>
<TD>汉</TD>
<TD>171</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000045</TD>
<TD>2001-2-15 0:00:00</TD>
<TD>2001-3-15 0:00:00</TD>
<TD>0</TD>
<TD>WY</TD>
<TD>1978-8-5 0:00:00</TD>
<TD>汉</TD>
<TD>162</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000046</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>2001-3-23 0:00:00</TD>
<TD>0</TD>
<TD>LQ</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>汉</TD>
<TD>171</TD>
</TR>
</TABLE>
</div>
</body>
========
easyui中对于dialog页面传值的接收
近期项目中，使用easyui制作了两个页面，其中A页面会弹出B页面，但是A页面会传递参数至B页面，在接收传递参数时，出现了一个小的波折
经过看API发现
dialog的功能是将B页面嵌入至A页面，这样，A页面作为B页面的父容器，所有的元素均可以被B页面访问
所以，之前的通过js获取页面参数方法就不适用了，因为B页面在js端获取的href实际上为A页面的href
那么问题来了：我怎么获取B页面的链接参数呢？
其实很简单，只要找到B页面的存放容器即可：
代码如下：
页面A代码：
//详情查看
function goToDetail(val) {
//var url = ‘…/Stock/CheckInventory/RandomCheckInventoryDetail.html?checksysno=’ + val;
var url = ‘RandomCheckInventoryDetail.html’;
var title = ‘随机盘查明细[’ + val + ‘]’;
//setPopFrameUrl(url, 1000, 550, title);
$('#dd').dialog({
title: title,
width: 1000,
height: 550,
closed: false,
cache: true,
collapsible:true,
href: url,
queryParams: { checksysno: val },
modal: true
});
}
页面B获取参数方法：
//获取页面url参数
function getQueryParam(name) {
var obj = $(’#dd’).dialog(‘options’);
var queryParams = obj[“queryParams”];
return queryParams[name];
}
其实，主要的就是A页面方法中的queryParams属性设置
========