layer實現彈出層自動調節位置

項目中有彈出層的內容是不固定的，根據情況可能變長變短，于是就要求做layer彈出層的大小自適應，查詢了api后發現

layer.iframeAuto方法可以實現，這里吐槽一點，ie瀏覽器的html沒有被body撐大，而iframeAuto方法是根據html的高度計算的，導致我之前出現在ie下，調用iframeAuto后高度直接變零。

好了，做好了這一點之后，測試又提出一個問題，因為他是用小屏幕測試的，上面的位置沒有變，彈出層變長以后按鈕就被擠到下面去了。所以我需要做一個效果，在彈出層長度改變后重新居中。

這時我就在網上開始找資料了，發現layer.style可以實現這個效果，但是很麻煩需要計算然后賦值。

正當我決定用這個方案時，結果我在chrome控制臺測試layer.style時發現一個意外的效果。當我移動控制臺邊界改變大小時，彈出層自動居中了。

移動前

移動后

實際上是觸發了父層的$(window).resize()。

然后我開始向這個方法實驗，但是不管是$(top.window).resize(),$(window.top).resize(),top.$(window).resize(),$(top).resize()都不能觸發top層的$(window).resize()方法。

最后還是沒有成功，我只好重新使用layer.style來計算了

var index = top.layer.getFrameIndex(window.name);//獲得layer彈出層索引
top.layer.iframeAuto(index, 30);//layer彈出層自適應，改造的代碼，源代碼加上自己加的高度
var topHeight = ($(top.window).height() - $(window).height())/2;//計算高度
top.layer.style(index,{top:topHeight+"px"});//設置彈出層位置

中規中矩解決這個問題，不過還是不知道在彈出層是否能夠調用父頁面的$(window).resize()

完！

以上這篇layer實現彈出層自動調節位置就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com