layer實(shí)現(xiàn)彈出層自動調(diào)節(jié)位置
項(xiàng)目中有彈出層的內(nèi)容是不固定的，根據(jù)情況可能變長變短，于是就要求做layer彈出層的大小自適應(yīng)，查詢了api后發(fā)現(xiàn)
layer.iframeAuto方法可以實(shí)現(xiàn)，這里吐槽一點(diǎn)，ie瀏覽器的html沒有被body撐大，而iframeAuto方法是根據(jù)html的高度計算的，導(dǎo)致我之前出現(xiàn)在ie下，調(diào)用iframeAuto后高度直接變零。
好了，做好了這一點(diǎn)之后，測試又提出一個問題，因?yàn)樗怯眯∑聊粶y試的，上面的位置沒有變，彈出層變長以后按鈕就被擠到下面去了。所以我需要做一個效果，在彈出層長度改變后重新居中。
這時我就在網(wǎng)上開始找資料了，發(fā)現(xiàn)layer.style可以實(shí)現(xiàn)這個效果，但是很麻煩需要計算然后賦值。
正當(dāng)我決定用這個方案時，結(jié)果我在chrome控制臺測試layer.style時發(fā)現(xiàn)一個意外的效果。當(dāng)我移動控制臺邊界改變大小時，彈出層自動居中了。
移動前
移動后
實(shí)際上是觸發(fā)了父層的$(window).resize()。
然后我開始向這個方法實(shí)驗(yàn)，但是不管是$(top.window).resize(),$(window.top).resize(),top.$(window).resize(),$(top).resize()都不能觸發(fā)top層的$(window).resize()方法。
最后還是沒有成功，我只好重新使用layer.style來計算了
var index = top.layer.getFrameIndex(window.name);//獲得layer彈出層索引
top.layer.iframeAuto(index, 30);//layer彈出層自適應(yīng)，改造的代碼，源代碼加上自己加的高度
var topHeight = ($(top.window).height() - $(window).height())/2;//計算高度
top.layer.style(index,{top:topHeight+"px"});//設(shè)置彈出層位置
中規(guī)中矩解決這個問題，不過還是不知道在彈出層是否能夠調(diào)用父頁面的$(window).resize()
完！
以上這篇layer實(shí)現(xiàn)彈出層自動調(diào)節(jié)位置就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS獲取當(dāng)前時間戳與時間戳轉(zhuǎn)日期時間格式問題
這篇文章主要介紹了JS獲取當(dāng)前時間戳與時間戳轉(zhuǎn)日期時間格式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題，這一篇博文將詳細(xì)的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10
微信小程序和H5頁面間相互跳轉(zhuǎn)代碼實(shí)例
這篇文章主要介紹了微信小程序和H5頁面間相互跳轉(zhuǎn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
fabric.js實(shí)現(xiàn)diy明信片功能
這篇文章主要為大家詳細(xì)介紹了fabric.js實(shí)現(xiàn)diy明信片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載
當(dāng)我們請求好第一頁數(shù)據(jù)后,將請求下一頁放到異步任務(wù)隊列里（宏任務(wù)或者微任務(wù)）,等當(dāng)前同步任務(wù)執(zhí)行完成后,立馬請求下一頁數(shù)據(jù),本文給大家介紹了JavaScript如何利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了基于Java開發(fā)連連看游戲小程序,連連看是在有限的時間內(nèi),只要把所有能連接的相同圖案,兩個一對地找出來,消除全部就成功了,文中提供了解決思路和部分實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-03-03
cookie 最近瀏覽記錄(中文escape轉(zhuǎn)碼)具體實(shí)現(xiàn)
cookie 最近瀏覽記錄(中文escape轉(zhuǎn)碼)具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-06-06
javascript復(fù)制粘貼與clipboardData的使用
window.clipboardData可以實(shí)現(xiàn)復(fù)制與粘貼的操作，下面有個小示例，想學(xué)習(xí)的朋友可以參考下2014-10-10
今天分析一下, 終于找到原因. 舊版本的js文件寫的瀏覽器判斷有異常, 所以導(dǎo)致插入點(diǎn)一直在頭部. 今天修復(fù)之2014-05-05
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)刮刮獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09