怎麼設定個性應用框

01

第一節：什麼是模態視窗

什麼是模態視窗，是指當模態視窗彈出來的時候，滑鼠不能單擊這個對話方塊之外的區域。一般用於給使用者一個提示資訊，必須關閉模態視窗之後才可以進行其它的操作。

圖1

圖1就是一個使用DIV+CSS自定義的一個模態視窗，其優點是個性化強，根據系統要求完全自行設計，而系統視窗是無法做到的。

JavaScript深入程式設計-從0基礎到深入學習 線上。NET培訓課程

¥

18

淘寶

購買

02

第二節：CSS 設定

一、 position定位

在CSS樣式中，position屬性主要用來設定元素的定位。position屬性可以設定不同的定位方式，任何元素都可以定位。

絕對定位：是指標對瀏覽器的視窗位置對模態視窗進行定位，固定在一個位置，不會被其它的元素影響。

相對定位：是指模態視窗的位置相對於其它元素而進行定位，會受到其它元素的影響。

Position屬性的值如下說明：

圖2

元素的定位型別說明如下：

static：又稱為靜態定位，它是position屬性的預設值，屬於正常定位，也就是對於top/bottom/left/right的設定無效。

absolute：又稱為絕對定位，它是基於父級別的元素進行定位的，但是該值有兩種特殊的情況：

A：如果父元素沒有使用position屬性，則子元素使用position=“absolute”，子元素的top/left/right/bottom的值是相對於瀏覽器定位的。

下面我們將父元素和子元素在頁面上呈現一下，可清楚的認識它們：

圖3

B：如果父元素使用了position屬性，則子元素使用了position=“absolute”， 子元素的top/left/right/bottom的值是相對於父元素定位的。

只要父元素使用了position屬性，則子元素就是相對於父元素定位的。

圖4

fixed：不管父元素是否使用了position屬性，則子元素使用position=“fixed”都是相對於瀏覽器進行定位的。

relative：在什麼情況下都是相對於父元素進行定位的。

如果要使一個DIV相對於整個瀏覽器定位，並且是全屏顯示，帶背景色，則可以設定如下CSS樣式：

<！DOCTYPE html>

執行一下具有背景色的頁面：

圖5

二、opacity透明

opacity屬性是CSS 3版本新增加的屬性，用於設定HTML元素的透明度，1表示不透明，0表示完全透明。透明度的設定在0-1之間。例如 opacity=0。5，半透明。

例如：現在給一個div元素設定透明度為30%

<！DOCTYPE html>

執行一下這個設定了頁面透明度的頁面：

圖6

三、 z-index堆疊

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

下面的Html程式碼設定一下z-index屬性：

<！DOCTYPE html>

執行一下具有z-index的頁面結果：

圖7

03

第三節：DIV+CSS設定提示視窗

一、整體效果

透過上面對CSS三個屬性的設定，則可以透過DIV+CSS設定模態提示視窗，效果如下：

圖8

當點選“儲存”或“提交”按鈕之後，如果頁面上的資訊沒有透過驗證，則會給出提示資訊，之前我們直接使用window。alert（）來提示，但透過上面的DIV+CSS模態提示視窗，更能提升使用者的體驗。

二、 CSS樣式

使用CSS設定模態視窗的完整程式碼：

三、 HTML程式碼

將模態視窗的CSS樣式應用在Html程式碼中：

執行一下使用html+css設定的模態視窗，其最終的樣子如下圖所示：

圖9

四、 JavaScript程式碼

使用JavaScript程式碼來控制DIV+CSS模態視窗的顯示和隱藏。

04

第四節、完整的DIV+CSS+JS程式碼

<！DOCTYPE html>

將上面的程式碼儲存到*。html檔案中，然後執行一下效果：

圖10

在圖10中點選“儲存”按鈕，就會彈出模態視窗。

圖11

在圖11中，一個完整的，顯示在瀏覽器視窗中間的模態視窗就出現了。

在這裡，我們將DIV+CSS設計的一個完整的模態視窗給開發出來了，使用模態視窗可以讓系統的提示資訊更加美觀，且完整自定義和個性化，給使用者一個非常棒的使用者體驗。