首頁 web前端 js教程 jQuery彈出層始終垂直居中相對於螢幕或目前視窗_jquery

jQuery彈出層始終垂直居中相對於螢幕或目前視窗_jquery

May 16, 2016 pm 05:38 PM
垂直居中 螢幕 彈出層

彈出層永遠是一個前端必須搞定的東西,一般情況下,如果彈出層有固定的高和寬,用樣式即可搞定,但是如果碰到沒有固定高或者固定寬或者固定高和寬的時候,我們就需要用JS去處理,去動態獲取當前窗口高或者寬;今天弄了2種情況,一個是相對於屏幕窗體,一個是相對於當前的窗口,看代碼,或許對你有用:

複製代碼 代碼如下:

//W3C/1. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



無標題文件


//瀏覽器視窗垂直居中

//目前視窗垂直居中



我是當前窗口啊我是當前窗口啊我是當前窗口啊我是當前窗口啊我是當前窗口啊我是當前窗口啊
我是當前窗口啊我是目前視窗啊我是目前視窗啊
我是目前視窗啊我是目前視窗啊我是目前視窗啊
我是目前視窗啊我是目前視窗啊我是目前視窗啊
我是目前視窗啊我是目前視窗啊我是目前視窗啊

我是目前視窗啊我是目前視窗啊我是目前視窗啊我是目前視窗啊
我是彈出視窗1111啊
我是彈出視窗1111啊
我是彈出視窗1111啊
我是彈出視窗1111啊
我是彈出視窗1111啊
我是彈出視窗1111啊
我是彈出視窗1111啊

我是彈出視窗2222啊
我是彈出視窗2222啊
我是彈出視窗2222啊
我是彈出視窗2222啊
我是彈出視窗2222啊



本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

iPhone螢幕截圖不起作用:如何修復 iPhone螢幕截圖不起作用:如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎?截圖非常簡單,因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是,還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來,點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來,開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在,您只需將這些功能中的任何一個連結到螢幕擷取即可。因此,點擊那裡的首

如何在iPhone中撤銷從主畫面中刪除 如何在iPhone中撤銷從主畫面中刪除 Apr 17, 2024 pm 07:37 PM

從主畫面中刪除了重要內容並試圖將其取回?您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法,並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的,有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖

6000 毫安矽負極電池!小米 15Pro 升級再曝料 6000 毫安矽負極電池!小米 15Pro 升級再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息,部落客數位閒聊站爆料稱,小米15Pro電池容量增大至6000mAh,支援90W有線閃充,這將是小米數位系列電池最大的Pro機型。先前數位閒聊站透露,小米15Pro的電池擁有超高能量密度,矽含量遠高於競品。矽基電池在2023年大規模試水後,第二代矽負極電池被認定為產業未來發展方向,今年將迎來直接競爭的高峰。 1.矽的理論克容量可達4200mAh/g,是石墨克容量的10倍以上(石墨的理論克容量372mAh/g)。對於負極而言,當鋰離子嵌入量達到最大時的容量為理論克容量,這意味著在相同重量下

螢幕錄製變黑:這是修復 螢幕錄製變黑:這是修復 May 03, 2024 pm 09:13 PM

您是否正在嘗試在手機螢幕上錄製某些內容,並且它正在變黑?通常,您可以從控制中心啟動螢幕錄製。在某些情況下,您無法在螢幕上錄製項目。我們已經提到了所有方案以及可以幫助您正常錄製螢幕的可能解決方案清單。螢幕錄製變黑的原因–如果您在iPhone螢幕上播放時嘗試錄製任何受DRM(數位版權管理)保護的內容,您將無法得到任何東西。輸出將是一個漆黑的螢幕。所有領先的OTT平台,如Netflix、Disney+、Hulu和Peacock,都有這個DRM,可以阻止任何螢幕錄製功能。 2.有幾個網站禁止使用螢幕捕獲

html如何讓文字方塊居中 html如何讓文字方塊居中 Apr 22, 2024 am 10:33 AM

HTML 文字方塊居中有多種方式:文字輸入框:使用CSS 程式碼input[type="text"] { text-align: center; }文字區域:使用CSS 程式碼textarea { text-align: center; }水平居中:在文字方塊父元素上使用text-align: center 樣式垂直居中:使用vertical-align 屬性input[type="text"] { vertical-align: middle; }Flexbox:使用display:

html怎麼把框架居中 html怎麼把框架居中 Apr 22, 2024 am 10:45 AM

有四種方法可將 HTML 框架置中:margin: 0 auto;:使框架水平置中。 text-align: center;:使框架內容水平居中。 display: flex; align-items: center;:讓框架垂直居中。 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);:使用 CSS 轉換在固定尺寸框架的容器中心放置框架。

css中怎麼讓ul內容居中 css中怎麼讓ul內容居中 Apr 26, 2024 pm 12:24 PM

在CSS中使UL內容居中:使用text-align屬性: 設定文字的對齊方式,包括清單項目的內容。使用margin屬性: 設定元素的左右邊距,使用margin: auto實作水平居中。使用display屬性: 將元素設定為inline-block,然後使用text-align: center垂直居中。使用flexbox屬性: 透過justify-content: center和align-items: center實現水平和垂直居中。

榮耀X60i手機明天上市:視覺四等邊OLED直屏 榮耀X60i手機明天上市:視覺四等邊OLED直屏 Jul 25, 2024 pm 01:54 PM

7月25日消息,榮耀X60i手機將於明天(7月26日)10:08開啟預售,手機採用輕量化設計,重量約172g,厚度約7.18mm。榮耀X60i採用居中挖孔直屏設計,四邊近乎無界的超窄邊框,大大拓寬了視野邊界。後置相機模組以優雅的直排佈局呈現,輔以閃光燈點綴於右側,既彰顯科技感又不失簡約之美,整體設計靈感似乎與華為Pura70系列遙相呼應,卻又不失自我特色。色彩選擇方面,榮耀X60i精心調配了四款時尚配色:幻夜黑雲水藍月影白珊瑚紫滿足不同人群的個人化美感需求。硬體配置同樣不容小覷,榮耀X60

See all articles