前端開發(fā)之CSS實(shí)現(xiàn)在網(wǎng)頁(yè)正中間顯示的彈出層

直以來(lái)，讓前端工程師頭疼的問題肯定包括垂直居中這個(gè)問題吧，什么文字垂直居中，圖片垂直居中之類的，很頭疼對(duì)不對(duì)，如果現(xiàn)在讓你寫一個(gè)在網(wǎng)頁(yè)正中間顯示的彈出層，你會(huì)用什么方法寫呢？

今天來(lái)分享一下小編所知道的幾種方法，希望能對(duì)大家有用，如果你有更好的解決方法，也歡迎你來(lái)告訴我，讓小編也漲漲姿勢(shì)哈。

第一種：固定寬高的彈出層

運(yùn)行效果

css樣式

html代碼

這里大家看下我用紅色框框框起來(lái)的那幾行代碼哈，其它的只是附加的一些效果。

優(yōu)點(diǎn)：適用于各種瀏覽器，包括令前端工程師頭疼的ie6。

缺點(diǎn)：必須要設(shè)置彈出層的寬高。

第二種：自適應(yīng)內(nèi)容寬高的彈出層

運(yùn)行效果

css樣式

html代碼

還是只看我用紅色框框框起來(lái)的那幾行代碼。

優(yōu)點(diǎn)：不用設(shè)置彈出層寬高，彈出層的寬高隨內(nèi)容自適應(yīng)居中。

缺點(diǎn)：只適用于ie10或以上版本及webkit內(nèi)核的瀏覽器（像現(xiàn)在主流的雙核瀏覽器在高速模式下都可以的）。。

如果要兼容其它內(nèi)核瀏覽器（比如火狐），就改成這樣：

以上就是小編常用的兩種彈出層在正中間顯示的方法，那么，你是用什么方法實(shí)現(xiàn)的呢？歡迎一起交流哦。

謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過(guò)程中遇到問題可以在評(píng)論區(qū)提問或者直接私信我，我會(huì)定期回復(fù)，碼農(nóng)劉小橋與你一起學(xué)習(xí)，共同進(jìn)步。

先，通過(guò)視頻了解一下我們要實(shí)現(xiàn)的效果，視頻如下：

分析

1.點(diǎn)擊彈出框，狀態(tài)框和遮擋層（背景變灰）就會(huì)顯示出來(lái) display：block；

2.點(diǎn)擊關(guān)閉按鈕，模態(tài)框和遮擋層就會(huì)隱藏起來(lái) display：none;

3.在頁(yè)面中拖拽的原理：鼠標(biāo)按下并且移動(dòng)，之后松開鼠標(biāo)

4.觸發(fā)事件是鼠標(biāo)按下mousedown，鼠標(biāo)移動(dòng)mousemove，鼠標(biāo)松開mouseup

5.推拽過(guò)程：鼠標(biāo)移動(dòng)過(guò)程中，獲得最新的值賦給模態(tài)框的left和top值，這樣模態(tài)框就可以跟著鼠標(biāo)走了

6.鼠標(biāo)按下出發(fā)的事件源是最上面一行，就是id為title

7.鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在盒子內(nèi)的坐標(biāo)，才是真正模態(tài)框的位置

8.鼠標(biāo)按下，我們要得到鼠標(biāo)在盒子的坐標(biāo)

9.鼠標(biāo)移動(dòng)，就讓模態(tài)框的坐標(biāo)設(shè)置為：鼠標(biāo)坐標(biāo)減去盒子坐標(biāo)即可，注意移動(dòng)事件寫到按下事件里面

10.鼠標(biāo)松開，就是停止拖拽，就是可以讓鼠標(biāo)移動(dòng)事件解除

代碼

hrome 126 于近期發(fā)布了穩(wěn)定版本，其中一個(gè)比較有意思的更新是給 HTML 帶來(lái)一個(gè)新的元素：<permission> ，它將從這個(gè)版本開始試用，并且正在努力走向標(biāo)準(zhǔn)化。

今天我們一起來(lái)看下這個(gè) <permission> 元素的用法。

Web 權(quán)限提示的問題

當(dāng) Web 應(yīng)用程序需要訪問瀏覽器的高級(jí)功能時(shí)，需要向用戶主動(dòng)請(qǐng)求許可。例如，當(dāng)百度地圖使用 Geolocation API 獲取用戶的地理位置時(shí)，瀏覽器會(huì)提示用戶申請(qǐng)權(quán)限，這是權(quán)限規(guī)范中定義明確的概念。

申請(qǐng)權(quán)限的觸發(fā)方式一般分為兩類，被動(dòng)隱式觸發(fā)，或者主動(dòng)顯示觸發(fā)：

例如，Geolocation API 是一個(gè)強(qiáng)大的 API，它的使用依賴于首次使用時(shí)隱式詢問的方法。例如，當(dāng)程序調(diào)用 navigator.geolocation.getCurrentPosition() 方法時(shí)，權(quán)限提示框會(huì)在第一次調(diào)用時(shí)自動(dòng)彈出，還有另外一個(gè)例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一種顯式的方式通過(guò)靜態(tài)方法來(lái)請(qǐng)求權(quán)限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

網(wǎng)站可以在加載時(shí)立即調(diào)用諸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。這會(huì)導(dǎo)致在用戶還沒與網(wǎng)站進(jìn)行交互時(shí)就彈出權(quán)限提示。這就是明顯的權(quán)限濫用行為，并且影響到兩種方式，既包括首次使用時(shí)的隱含詢問，也包括提前明確請(qǐng)求。

權(quán)限濫用導(dǎo)致瀏覽器廠商要求有像點(diǎn)擊按鈕或按下按鍵這樣的用戶操作，然后才會(huì)顯示權(quán)限提示。這種方法的問題在于，瀏覽器很難確定某個(gè)特定的用戶操作是否應(yīng)該導(dǎo)致顯示權(quán)限提示。也許用戶只是因?yàn)轫?yè)面加載時(shí)間太長(zhǎng)而在頁(yè)面上隨意某個(gè)地方隨便點(diǎn)擊，有些網(wǎng)站也變得非常擅長(zhǎng)誘騙用戶點(diǎn)擊內(nèi)容來(lái)觸發(fā)提示。

另一個(gè)問題是權(quán)限提示框通常顯示的方式：在網(wǎng)站的 “死亡線” 之上（特別是在大屏幕上），也就是說(shuō)，在應(yīng)用程序能夠繪制到的瀏覽器窗口區(qū)域之外。用戶在剛剛點(diǎn)擊了窗口底部的一個(gè)按鈕后，可能會(huì)錯(cuò)過(guò)瀏覽器窗口頂部的提示，這種情況還是挺常見的。當(dāng)瀏覽器有應(yīng)對(duì)權(quán)限濫用的緩解措施時(shí)，這個(gè)問題往往會(huì)更加嚴(yán)重。

另外，用戶一旦做出了拒絕某個(gè)權(quán)限的操作，之后想要改變就不太容易了。他們得找到特定的地方，比如那個(gè)網(wǎng)站信息下拉菜單，然后去進(jìn)行重置或調(diào)整權(quán)限的操作，而且還得重新加載頁(yè)面才行。網(wǎng)站也沒辦法提供很方便的途徑讓用戶快速改變權(quán)限狀態(tài)，還得詳細(xì)地告訴用戶怎么去找到地方改變?cè)O(shè)置。

如果某個(gè)權(quán)限是非常重要的，比如視頻會(huì)議軟件要用麥克風(fēng)權(quán)限，那像谷歌會(huì)議這類的軟件就會(huì)彈出很顯眼的對(duì)話框來(lái)告訴用戶怎么去把之前阻止的權(quán)限給開通。

<permission>元素

為了解決上面的這些問題，<permission> 元素誕生了。這個(gè)元素允許開發(fā)者以聲明方式請(qǐng)求使用權(quán)限，如下例所示：

<permission type="camera" />

“type” 屬性代表你正在請(qǐng)求的權(quán)限列表（如果有多個(gè)可以以空格分割）。目前，允許的值是 'camera'，'microphone' 以及 'camera microphone'。默認(rèn)情況下，這個(gè)元素呈現(xiàn)出來(lái)的樣子類似于具有最簡(jiǎn)用戶代理樣式的按鈕。

對(duì)于某些允許附加參數(shù)的權(quán)限，type-ext 屬性接受以空格分隔的鍵值對(duì)，例如 precise:true 地理位置權(quán)限。

當(dāng)用戶與 <permission> 元素交互時(shí)，他們可以循環(huán)經(jīng)歷各個(gè)階段：

如果他們之前不允許某項(xiàng)功能，他們可以在每次訪問時(shí)允許該功能，或者在當(dāng)前訪問時(shí)允許該功能。

如果他們之前允許該功能，他們可以繼續(xù)允許，或者停止允許。

如果他們之前不允許某項(xiàng)功能，他們可以繼續(xù)不允許它，或者這次允許它。

<permission> 元素的文本會(huì)根據(jù)狀態(tài)自動(dòng)更新。例如，如果已授予使用某項(xiàng)功能的權(quán)限，則文本會(huì)更改為表示允許使用該功能。如果需要先授予權(quán)限，則文本會(huì)更改為邀請(qǐng)用戶使用該功能。將之前的屏幕截圖與以下屏幕截圖進(jìn)行比較，以查看這兩種狀態(tài)。

<permission> 元素可以與 Permissions API 一起使用。有許多事件可供監(jiān)聽：

onpromptdismiss：當(dāng)元素觸發(fā)的權(quán)限提示被用戶關(guān)閉（例如，單擊關(guān)閉按鈕或單擊提示之外）時(shí)，會(huì)觸發(fā)此事件。
onpromptaction：當(dāng)元素觸發(fā)的權(quán)限提示已被用戶對(duì)提示本身采取某種操作解決時(shí)，觸發(fā)此事件。這并不一定意味著權(quán)限狀態(tài)已經(jīng)改變，用戶可能已經(jīng)采取了維持現(xiàn)狀的操作（例如繼續(xù)允許權(quán)限）。
onvalidationstatuschange：當(dāng)元素從 "valid" 切換到 "invalid" 時(shí)觸發(fā)此事件，例如當(dāng)元素被其他超文本標(biāo)記語(yǔ)言內(nèi)容部分遮擋時(shí)，會(huì)認(rèn)為是 "invalid"。

我們可以直接在 HTML 代碼中內(nèi)聯(lián)注冊(cè)這些事件的事件監(jiān)聽器（<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />），或者在 <permission> 元素上使用 addEventListener()：

<permission type="camera" />
<script>
  const permission=document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus=await navigator.permissions.query({name: "camera"});
  permissionStatus.addEventListener('change', ()=> {
    // Run the check when the status changes.
    if (permissionStatus.state==="granted") {
      useCamera();
    }
    // Run the initial check.
    if (permissionStatus.state==="granted") {
      useCamera();
    }
  });
</script>

最后

參考：https://developer.chrome.com/blog/permission-element-origin-trial

在線咨詢

上一篇：用CSS3實(shí)現(xiàn)鐘表效果
下一篇：WordCloud 中英文詞云圖繪制，看這一篇就夠了

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端開發(fā)之CSS實(shí)現(xiàn)在網(wǎng)頁(yè)正中間顯示的彈出層

先，通過(guò)視頻了解一下我們要實(shí)現(xiàn)的效果，視頻如下：

分析

代碼

Web 權(quán)限提示的問題

<permission>元素

最后

您的項(xiàng)目需求