使用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，后来，变通了办法，解决了这个问题，希望这篇博客，能给您带来一点点帮助。