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代碼簡潔方式之函數(shù)方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了javascript關(guān)于繼承的用法,實(shí)例匯總了常見的javascript關(guān)于繼承的用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
本文給大家介紹使用Bootstrap新制作的一個登錄框，帶驗(yàn)證碼，帶校驗(yàn)，非常不錯，具有參考借鑒價值，感興趣的朋友可以參考下2016-06-06
本文主要介紹了js實(shí)現(xiàn)下拉菜單效果的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
關(guān)于javascript解決閉包漏洞的一個問題詳解
閉包在JavaScript高級程序設(shè)計(第3版)中是這樣描述:閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù),下面這篇文章主要給大家介紹了關(guān)于javascript解決閉包漏洞的一個問題的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript適配器模式的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
JavaScript 如何實(shí)現(xiàn)同源通信
在日常工作中，你可能會遇到同源頁面間通信的場景。針對這種場景，我們可以使用 localStorage 和 storage 事件來解決同源頁面間通信的問題。除此之外，我們還可以使用 Broadcast Channel API 來解決該問題。接下來，將帶大家一起來認(rèn)識一下 Broadcast Channel API。2021-05-05
利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片(可設(shè)置樣式可分頁)
在我們需要在頁面中打印某個區(qū)域的內(nèi)容或者生成pdf的時候,我們可以直接用printJs庫,這篇文章主要給大家介紹了關(guān)于利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片的相關(guān)資料,可設(shè)置樣式可分頁,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語言實(shí)現(xiàn)判斷兩個日期不能跨年和跨月，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06