跳到主要內容

網頁顯示彈出畫面同時禁止捲動主畫面的技巧

作法應該有相當多種,這裡提兩種我從一些網站中觀察到的作法。

設定 body 為 overflow:hidden

準備兩個 div, 一個是 main content (id=main), 一個是 pop-up (彈出畫面), 平常隱藏 pop-up, 要顯示 pop-up 時,設 body 的 overflow: hidden,並顯示 pop-up。這樣主頁面就不能捲了。

關掉 pop-up 時再設 body 的 overflow: visible (預設值), 主頁面就可以捲了。

程式碼像這樣:

var popup = document.getElementById('popup');
function show_popup() {
  popup.style.display = 'block';
  document.body.style.overflow = 'hidden';
}

function close_popup() {
  popup.style.display = 'none';
  document.body.style.overflow = 'visible';
}

對 main content 為 position:fixed

這個作法比較複雜,是拆解 facebook 彈出照片的頁面得知的。

準備兩個 div, 一個是 main content (id=main), 一個是 pop-up (彈出畫面), 平常隱藏 pop-up, 要顯示 pop-up 時,設 main content 的 position: fixed,並顯示 pop-up。這樣主頁面就不能捲了。但是因為 scroll offset 歸零 (content height 改變的副作用), 要自己維護 scroll offset (後述)。

這個作法與上個作法有幾點差異:

  • 網頁主動管理頁面大小, 造成主頁面不能捲; 上個作法是設 body 為 overflow: hidden, 隱含瀏覽器會禁止捲動主頁面。這個規則有點詭異,多數瀏覽器應該有這麼作吧。
  • 因為 main content 變成 position: fixed, 它的高度也就變成 viewport height, 然後 body 的 height 也因此縮水, 最後主頁面的內容高度和 viewport height 一樣,所以就不能捲。但也因如此, scroll offset 會歸零,若之前有捲動主頁面才顯示彈出畫面, 背景的主頁面會跑掉,所以要自己記下 scroll offset, 並在 main content 設 top = -scrollY, left = -scrollX, 這樣畫面才會定住。取消彈出畫面後,要再自己 scroll 回當初的位置。程式碼如下:
var main = document.getElementById('main');
var popup = document.getElementById('popup');
var scrollX = 0;
var scrollY = 0;
function show_popup() {
  popup.style.display = 'block';
  scrollX = window.pageXOffset || document.documentElement.scrollLeft;
  scrollY = window.pageYOffset || document.documentElement.scrollTop,
  /*
    Set "fixed" and then the height becomes to fit to the window height.
    and then the body height becomes window height.
    You can observe the change by typing "document.body.scrollHeight" in DevTools console
  */
  main.style.position = 'fixed';
  main.style.left = -scrollX;
  main.style.top = -scrollY;
}

function close_popup() {
  popup.style.display = 'none';
  delete main.style.left;
  delete main.style.top;
  main.style.position = 'static';
  window.scrollTo(scrollX, scrollY);
}
  • 優點: 跨瀏覽器 (大概吧,不然 facebook 不會這麼作)
  • 缺點: 寫起來比較囉嗦, 而且顯示或關掉彈出畫面後, 頁面內容高度和 scroll offset 會改變, 若網頁有針對這些事件作事,要另外處理這裡觸發的「false event」

其它

若要幫彈出畫面設背景是半透明的黑畫面,要用 background + rgba 設秬明度。另一個作法是用 opacity,但是 opacity 會順便影響到子元素,所以用 background 配上 rgba 設值,比較合適。例如:

background: rgba(0, 0, 0, 0.5);

留言

這個網誌中的熱門文章

(C/C++ ) 如何在 Linux 上使用自行編譯的第三方函式庫

以使用 LevelDB 為例。 抓好並編好相關檔案,編譯方式見第三方函式庫附的說明:$ ls include/ # header files leveldb/ $ ls out-shared/libleveldb.so* # shared library out-shared/libleveldb.so@ out-shared/libleveldb.so.1@ out-shared/libleveldb.so.1.20* 下面的例子用 clang++ 編譯,這裡用到的參數和 g++ 一樣。 問題一:找不到 header$ clang++ sample.cpp sample.cpp:5:10: fatal error: 'leveldb/db.h' file not found #include "leveldb/db.h" ^ 1 error generated. 解法:用 -I 指定 header 位置 問題二:找不到 shared library$ clang++ sample.cpp -I include/ /tmp/sample-2e7dd8.o: In function `main': sample.cpp:(.text+0x1e): undefined reference to `leveldb::Options::Options()' sample.cpp:(.text+0x6f): undefined reference to `leveldb::DB::Open(leveldb::Options const&, std::string const&, leveldb::DB**)' sample.cpp:(.text+0x10c): undefined reference to `leveldb::Status::ToString() const' sample.cpp:(.text+0x7d0): undefined reference to `leveldb::Status::ToString() const' clang: error: linker command failed with exit code 1 (u…

virtualbox 使用 USB 裝置

2012-12-16 更新 現在 (4.x 版) 似乎無需做任何設定, 只要有裝 Oracle VM VirtualBox Extension Pack, 在 VirtualBox 視窗右下角按 USB 的圖示, 再點目標裝置, 即可加入或移除該裝置 同一時間只有 host 或 guest 可擁有該裝置, 所以從 guest OS 移除, 相當於接回 host OS 目前 VirtualBox 只支援 USB 2.0 的插槽, 若偵測不到時, 注意一下是否為這個問題 有時拔拔插插, VirtualBox 會進入奇怪的狀態, 接上去 guest OS 無法連接且跳出 device is busy 的錯誤訊息。試看看拔除該裝置, 重開 guest OS (續上則) 若重開 guest OS 無效, 並且 host OS 已移除該裝置, VirtualBox 的 USB 清單卻仍顯示 "captured", 試看看拔除該裝置, 重開 host OS原文網路上搜一下, 比較多是 Ubuntu 當 host 的解法, 我的情況是 Win7 當 host, Ubuntu 當 guest。 這兩篇說明很詳細《Learn How to Set Up USB and Networking Options in VirtualBox》《幻影千瞳的部落格: VirtualBox 使用筆記(二):使用 USB 裝置》 現在的版本圖形介面很好用了, 不用像第二篇說的那樣用指令操作。這裡記下我的操作步驟: 關掉 guest OS 在 VirtualBox 選單, 選擇 guest OS -> Settings -> USB -> Enable USB 2.0 會出現訊息框, 說明要安裝 Oracle VM VirtualBox Extension Pack。下載後安裝它 host OS 插入 USB 隨身碟 在 VirtualBox 選單, 選擇 guest OS -> Settings -> USB, 點右邊有綠色 "+" 的 USB 頭的圖示, 選擇該 USB 隨身碟, 加入它的 filter 從 host OS 移除 USB 隨身碟 開啟 guest OS 插入 USB 隨身碟, 於是 guest OS 會自動偵測…

熟悉系統工具好處多多

記一下以前很困擾, 現在秒殺的小事。 更新這篇的時候, 忘了函式庫用的 man page 裝在那個 package。以前就會想辦法 google, 運氣好一下會找到, 運氣不好會多找一會兒。 這回我想到新作法:$ strace -e open man 3 printf > /dev/null # 發現是讀 /usr/share/man/man3/printf.3.gz $ dpkg --search /usr/share/man/man3/printf.3.gz # 找到套件名稱 manpages-dev $ aptitude show manpages-dev # 確認描述符合, 收工