使用EasyUI弹出框页面样式乱了——控制弹出框位置

      在做系统的时候，我遇到了一个这样子的问题：页面比较长，把也页面放入了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，后来，变通了办法，解决了这个问题，希望这篇博客，能给您带来一点点帮助。