在做系统的时候,我遇到了一个这样子的问题:页面比较长,把也页面放入了Iframe中,这个页面使用了EasyUI的样式,弹出框弹出位置为中间,当弹出框弹出时,页面会乱样式。主要是因为弹出框在页面中间,页面的长度又超过了整个显示器的高度,所以,显示的部分,会出现问题。
出现问题后,寻找到了一些解决方案。因为EasyUI的弹出框,是直接封装好的 , 所以,我们不能灵活的改变其位置。那么,最简单的解决方案,就是使用在顶部弹出的弹出框。但是,因为项目需求,我必须要弹出框在中间,这怎么办呢?
经过了一段时间的思考和各种资料的查询,我们出了两个方案,1、使用EasyUI的show;2使用dialog
使用show方法,可以应用于一些提示性的位置,我们可以控制弹框的位置和弹框的参数,例子代码如下:
$.messager.show({
title: '**信息',
msg:' 只能选中一行',
showType: 'slide',
style: {
right: '',
top: 200,
//width:100,
//height:500,
heght:100,
bottom: ''
}
});
还有一些弹出框,是为了让用户选择的,有确定按钮 或者确定和取消按钮的,这种情况,我们可以使用dialog。在使用dialog之前,要现在页面中写一个隐藏域,如果有其他内容,也可以写在隐藏域中。在javascript中的代码,可以参考如下:
$('#dlgtest').css({ display: "block" });//dlgtest 为隐藏div的Id
$('#dlgtest').dialog({
content: "请选择至少一条要删除的信息!",
title: '权限设置',
//iconCls: "icon-edit",
collapsible: false,
minimizable: false,
maximizable: false,
closable: false,
resizable: false,
top: 200,
width: 252,
//height: 485,
height:100,
//left: auto,
modal: true,
buttons: [
{
text: '确定',
iconCls: 'icon-ok',
handler: function () {
$('#dlgtest').dialog('close');
<span style="white-space:pre"> </span>//点确定之后的操作
}
},<pre name="code" class="javascript">{
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#dlgtest').dialog('close');
}
}
] });
这样,我们的问题就得到了解决。在解决这个问题的时候,最开始,一直在EasyUI的弹出框中想办法,通过EasyUI的官网,以及各种帮助手册,但是最终还是没有找到,不过,在这个过程中,也学习了一次EasyUI,后来,变通了办法,解决了这个问题,希望这篇博客,能给您带来一点点帮助。
分享到:
相关推荐
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值,详情链接:
基于easyui的弹出框,为了方便使用稍微封装了下,有新增 修改用的,查看用的,有多步(上一步,下一步 跳过 )的,自定义按钮等等。分享下 赚点分
NULL 博文链接:https://cqh520llr.iteye.com/blog/1956791
Easyui 前台框架结合PetaPoco ROM框架,理财后台管理系统。
解决easyui的弹框越界问题 里面的包含的js和css文件自己可以用easyui官方的文件
程序是自己亲手写的EasyUI多层导航框架,测试无误与大家分享下!实现了多导航功能, easyui-accordion与easyui-tree完善的结合实现导航,对EasyUI有兴趣的可以看看!
EASYUI 页面框架 可以直接用来做项目后台页面使用
jquery-easyui 前端开发框架
easyui框架,easyui框架,easyui框架,easyui框架,easyui框架easyui框架easyui框架
Jquery EasyUI 页面框架Demo,共4个
EasyUI框架的后台管理模板,可进行三级管理,上下结构布局,上部分子系统按钮,下部分左侧菜单,下部右侧操作部分
Jquery-easyui添加搜索框,
使用easyui框架的web应用,详细介绍了使用easyui框架的的使用
这是我自己空闲时间搭建的一个Easyui后台前端框架,希望它可以对大家有帮助。
easyui即时消息框实例
easyui框架皮肤整套
easyUI框架下载
基于easyui的弹出框设置。一些弹出框的不现用法不过需要easyui的js和css.
常用的easyUI表单验证类型