1. 程式人生 > >easyui的dialog開啟導致父頁面出現滾動條

easyui的dialog開啟導致父頁面出現滾動條

在開發時,出現了一個很奇怪的bug,在easyui-panel的面板用多個easyui-dialog彈出框時,在面板右側可能會出現滾動條,而且視窗整體不居中,在頁面下方,如果關閉dialog,則滾動條又消失了。如圖:

為什麼說可能:在我的頁面有5個dialog,分別繫結的是新增、修改、刪除、詳情、釋出的dialog頁面,然而5個dialog,有兩個dialog開啟後出現如下圖情況:(下圖是點選修改頁面出現的情況)


我們知道,easyui的dialog有一個modal屬性,當它為true時,整個介面除了dialog之外其他地方不能操作。然而我發現

easyui-1.3版本有一個bug,當使用modal:true時,有時會出現上面這種情況。若不新增modal為true,則沒有出現此情況,但是這時我們的頁面就沒有了幕布效果(可以點選其他按鈕),很不爽。

經過查閱資料發現,我發現是這個modal的問題,在開啟dialog時,easyui會產生一個幕布效果,然而網上的其他方法並不好使,有前端經驗的大神可以嘗試著改改。。。。

我對前端easyui的瞭解很少,無能為力,所以我嘗試了一個笨辦法。在easyui-panel面板新增一個overflow:hidden;並不好使。。。。。。。。。。

最後我通過瀏覽器的除錯發現


easyui的easyui-panel樣式在包裝後變成上圖的div,我發現這個div的height未知,於是我就想是否可以給這個div新增一個高度,新增後是否就不會出現滾動條,然後親測有效。。。。。。。。。。。。。。。。。。。。。。。。。。只不過這個高度得自己去查詢合適的高度。。。。我的是480,如下圖:


這算是我暫時的笨辦法吧,我的easyui版本是1.3.3,希望有大神能夠留言,提供更好的辦法。