Easyui 创建dialog的两种方式，以及他们带来的问题

使用easyui时，创建dialog是经常做的事，有的时候可能大家经常使用的一种方式是,

方法一：

在jsp页面写这样的div

<divid=

"yy"

class=

"easyui-dialog"

title=

"aa"

data-options=

[code]"modal:true,closed:true,href:'a.jsp'"

style=

"width:110px;height:110px;overflow:hidden"

>

</div>

然后在js中

functionx(){

$([code]'#yy'

).dialog({

.....//添加一些属性，比如加载，按钮等

}

$(

'#yy'

).dialog

('open');//打开dialog

这地方要注意，加入你关闭窗口的地方使用$(

'#yy'

).dialog('destroy');那么你这个dialog就只能使用一次，为什么呢，因为这地方你创建的是一个固定位置的dialog，因为你是把dialog固定在了上面的div中，这时你只能使用close，即$('#yy'

[code]).dialog('close');close即是把当前窗口隐藏，但没有销毁，所以你可能遇到的问题就是，下次再次打开这个窗口的时候，里面还是上次的内容。如果使用destroy，那么整个dialog组件都被销毁了，所以只能使用第一次，第二次再怎么点也没用。那有解决的办法吗，肯定是有的。[/code]

方法二：

dialog的第二种创建方式就是，创建一个临时的对话窗口，不用在jsp写个div啥的。直接在js中写就可以了，如下

$(

'<div/>'

).dialog({

.....//添加一些属性，比如加载，按钮等

}

这地方关闭的时候可以destroy了，下次打开即是一个新的dialog，那么这个方式在应用中有没有什么问题呢。我遇到了，不知你遇到过没，大概代码是这样的

<divstyle="overflow:hidden;">

<table>

<tr>

<td>

<div>

<inputtype='text'....>

<inputtype='text'....>

<inputtype='text'....>

<div>

</td>

</tr>

<tr>

<td>

<div>

<inputtype='text'....>

<inputtype='text'....>

<inputtype='text'....>

<div>

</td>

</tr>

......很多个tr

<table>

<div>

我在最外层的div中写个overflow：hidden，目的就是让下面的内容超出框架后，使用滚动条，但大家要注意，使用滚动条，最起码这个框架的位置得是固定的吧，即需要在div外层的div给一个postion=relative啊，当然firefox和谷歌只要不是IE内核的，即使你这地方没有固定位置也没问题，人家浏览器强大嘛。但问题就在IE中，不理你这套，必须按照规矩来，那怎么办呢，反正我是弄了很久。

方法一：放弃使用临时dialog，即第二种创建方式，使用第一种创建方式，但每次打开一个dialog都要刷新才能用，太蛋疼啦。

方法二：很简单

$(

'<divstyle="position:relative"/>'

).dialog({

.....//添加一些属性，比如加载，按钮等

}

对就只要在上面的div后面加个style="position:relative“就搞定了，希望这能帮助在兼容性折磨下的你吧