在easyui框架下对话框缺省有边框、标题栏和阴影,还有功能按钮栏。
如果想自由构建里面的内容就需要去掉这些缺省的组件。
下面提供一种方法来方便的去掉他们,改造对话框的显示方式。直接上代码:
<html>
<div id="myModal">
内容
<div οnclick='dig.dialog("close")'>close</div>
</div>
<script>
var dig;
$(function(){
dig = $('#myModal').show().dialog({
modal:true,
resizable:false,
width:400,
height:200,
title:'Please Select',
buttons:[{ //注释掉这个buttons可以去掉底部的功能按钮栏
text:'Ok',
position:'center',
iconCls:'icon-ok',
handler: function(){
dig.dialog("close");
}
}],
onClose:self.closeDialog
});
//改造对话框的显示方式
var parent=$("#myModal").parent();
parent.css("padding", "0");//去边框
parent.css("border", "0");//去边框
parent.css("borderRadius","1px");//去圆角效果
parent.find(".window-header").css("display","none");//藏标题
parent.parent().find(".window-shadow").css("display","none");//藏阴影
parent.parent().find(".window-mask").css("background","#555");//调整遮罩颜色
parent.parent().find(".window-mask").css("opacity", "0.8");//调整遮罩透明度
});
</script>
</html>