本發(fā)明涉及計算機技術領域，尤其涉及一種網(wǎng)頁中彈窗的處理方法和裝置。

背景技術：

在進行超文本標記語言(英文全稱：Hyper Text Markup Language，英文簡稱：HTML)網(wǎng)頁設計時，需要單獨將HTML設計的腳本與專門對HTML的美觀設計的層疊樣式表(英文全稱：Cascading Style Sheets，英文簡稱：CSS)代碼進行編輯。CSS作為一種計算機標記語言，其在標準網(wǎng)頁設計中負責網(wǎng)頁內容的表現(xiàn)，CSS能夠對網(wǎng)頁中各個顯示對象的位置排版進行精確控制，支持幾乎所有的字體、字號、樣式。

目前的HTML結構中在網(wǎng)頁的主體內容之上可以顯示彈窗，彈窗能夠懸浮在主體內容之上，在HTML頁面關聯(lián)的CSS代碼中可以將彈窗設置為水平垂直居中樣式。在目前的CSS定位到水平垂直居中的解決方案中主要有兩種，第一種方案是通過負margin實現(xiàn)，第二種方案通過CSS3的transform實現(xiàn)。在第一種方案中，CSS水平垂直居中樣式需要計算彈窗的高度和寬度，因為彈窗的寬度和高度是自動撐開的，所以需要JavaScript(簡稱：JS)動態(tài)的計算彈窗的寬度和高度，因此會比較耗費處理資源。而第二種方案中，由于使用CSS3的transform，雖然解決了JS動態(tài)計算的問題，但是如果彈窗需要使用transform進行動畫，就無法實現(xiàn)彈窗的水平垂直居中樣式，如果彈窗需要使用水平垂直居中樣式，就無法實現(xiàn)彈窗的動畫效果。因此在上述的CSS3的transform解決方案中，當前的彈窗在處理水平垂直居中與動畫效果時只能二選一，無法同時實現(xiàn)彈窗的水平垂直居中與動畫效果。

技術實現(xiàn)要素：

本發(fā)明實施例提供了一種網(wǎng)頁中彈窗的處理方法和裝置，用于同時實現(xiàn)彈窗的水平垂直居中與動畫效果，且不需要進行JS動態(tài)計算。

為解決上述技術問題，本發(fā)明實施例提供以下技術方案：

第一方面，本發(fā)明實施例提供一種網(wǎng)頁中彈窗的處理方法，包括：

獲取超文本標記語言HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將所述遮罩層元素和所述彈窗層元素之間的層級關系配置為父子元素；

在所述遮罩層元素關聯(lián)的第一層疊樣式表CSS代碼中配置預設的布局樣式；

在所述彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。

第二方面，本發(fā)明實施例還提供一種網(wǎng)頁中彈窗的處理裝置，包括：

彈窗層嵌套模塊，用于獲取超文本標記語言HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將所述遮罩層元素和所述彈窗層元素之間的層級關系配置為父子元素；

布局配置模塊，用于在所述遮罩層元素關聯(lián)的第一層疊樣式表CSS代碼中配置預設的布局樣式；

動畫配置模塊，用于在所述彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。

從以上技術方案可以看出，本發(fā)明實施例具有以下優(yōu)點：

在本發(fā)明實施例中，獲取HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素，在遮罩層元素關聯(lián)的第一CSS代碼中配置預設的布局樣式，在彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。本發(fā)明實施例中在HTML網(wǎng)頁結構中配置有遮罩層元素，并且該遮罩層元素配置為彈窗層元素的父元素，因此本發(fā)明實施例中彈窗層元素是嵌套在遮罩層元素里面，因此在第一CSS代碼中配置布局樣式后，彈窗層元素也可以按照該布局樣式來顯示，從而不需要進行JS動態(tài)計算。該布局樣式也可以設置為水平垂直居中樣式，并且本發(fā)明實施例中第二CSS代碼中配置動畫樣式，彈窗層元素也可以按照該動畫樣式來顯示。因此本發(fā)明實施例中可以同時實現(xiàn)彈窗的水平垂直居中與動畫效果。

附圖說明

為了更清楚地說明本發(fā)明實施例中的技術方案，下面將對實施例描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施例，對于本領域的技術人員來講，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明實施例提供的一種網(wǎng)頁中彈窗的處理方法的流程方框示意圖；

圖2-a為本發(fā)明實施例提供的一種網(wǎng)頁中彈窗的處理裝置的組成結構示意圖；

圖2-b為本發(fā)明實施例提供的一種網(wǎng)頁中彈窗的處理裝置的組成結構示意圖；

圖3為本發(fā)明實施例提供的網(wǎng)頁中彈窗的處理方法應用于終端的組成結構示意圖。

具體實施方式

本發(fā)明實施例提供了一種網(wǎng)頁中彈窗的處理方法和裝置，用于同時實現(xiàn)彈窗的水平垂直居中與動畫效果，且不需要進行JS動態(tài)計算。

為使得本發(fā)明的發(fā)明目的、特征、優(yōu)點能夠更加的明顯和易懂，下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，下面所描述的實施例僅僅是本發(fā)明一部分實施例，而非全部實施例?；诒景l(fā)明中的實施例，本領域的技術人員所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

本發(fā)明的說明書和權利要求書及上述附圖中的術語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，以便包含一系列單元的過程、方法、系統(tǒng)、產(chǎn)品或設備不必限于那些單元，而是可包括沒有清楚地列出的或對于這些過程、方法、產(chǎn)品或設備固有的其它單元。

現(xiàn)有技術中在處理彈窗時可以使用CSS3的移動(英文名稱：transform)屬性的具體代碼如下：

其中，該方法雖然解決了JS動態(tài)計算的問題，但是如果使用transform進行動畫就會出現(xiàn)錯亂，因為根據(jù)CSS樣式作用原則，權重高的樣式將會替換權重低的樣式，而平級的權重后面的樣式將會覆蓋前面的樣式，所以如果需要進行縮放動畫設置，例如transform:scale(1.2)將會覆蓋上面的transform:translate(-50％,-50％)權重，所以在需要使用transform進行動畫的時候就不可以顯示水平垂直居中樣式，因為該水平垂直居中樣式會被動畫樣式覆蓋掉，同理如果彈窗需要使用水平垂直居中樣式，就無法實現(xiàn)彈窗的動畫效果。因此在上述的CSS3的transform解決方案中，當前的彈窗在處理水平垂直居中與動畫效果時只能二選一，無法同時實現(xiàn)彈窗的水平垂直居中與動畫效果。

在本發(fā)明實施例中網(wǎng)頁結構中可以配置遮罩層，該遮罩層設置在彈窗和主體內容之間，該遮罩層是彈窗和主體內容之間的一層半透明的蒙板。本發(fā)明實施例中，在網(wǎng)頁結構的主體內容之上有一個圖層為遮罩層，在遮罩層之上還設置有彈窗層，這兩個圖層中只有相重疊的地方才會被顯示。也就是說在遮罩層中有對象的地方就是透明的，可以看到彈窗層中的對象，而沒有在遮罩層中沒有對象的地方就是不透明的，遮罩層中相應位置的對象是看不見的。本發(fā)明實施例中將遮罩層和彈窗層之間的層級關系配置為父子層，從而可以彈窗的布局樣式和動畫樣式的同時顯示。接下來分別進行詳細說明。本發(fā)明網(wǎng)頁中彈窗的處理方法的一個實施例，具體可以應用于對網(wǎng)頁中彈窗的處理過程中，請參閱圖1所示，本發(fā)明一個實施例提供的網(wǎng)頁中彈窗的處理方法，可以包括如下步驟：

101、獲取HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素。

在本發(fā)明實施例中，HTML網(wǎng)頁結構是網(wǎng)絡的通用語言，它允許網(wǎng)頁制作過程中建立文本與圖片相結合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到。本發(fā)明實施例中創(chuàng)建的HTML網(wǎng)頁結構中除了配置有彈窗層元素，還可以引入遮罩層元素，該遮罩層元素可以將與遮罩層相鏈接的網(wǎng)頁中主體內容圖形中的圖像遮蓋起來，從而創(chuàng)建出多樣顯示的網(wǎng)頁效果。從HTML網(wǎng)頁結構中獲取到遮罩層元素和彈窗層元素之后，進一步的將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素。其中，在網(wǎng)頁結構的文檔中多個元素是分層次的，這種層次可以是包含關系(也稱為嵌套關系、父子關系、繼承關系)，這種層次也可以是并列關系(也稱為鄰居關系、相鄰關系、兄弟關系)。在目前的HTML網(wǎng)頁結構中遮罩層元素和彈窗層元素是獨立配置的，兩者之間的層級是平級的，例如是兄弟元素。而本發(fā)明實施例中對遮罩層元素和彈窗層元素之間的層級關系是配置為父子元素的，即彈窗層元素時嵌套在遮罩層元素里面，從而對該遮罩層元素的樣式配置也可以是彈窗層元素中生效，因此彈窗層元素可以繼承遮罩層元素的樣式配置。

在本發(fā)明的一些實施例中，步驟101將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素，具體可以包括如下步驟：

A1、在HTML網(wǎng)頁結構中插入HTML標簽，將遮罩層元素寫入HTML標簽中，并在HTML標簽中寫入遮罩層元素之后的分段(英文名稱：section)標簽中繼續(xù)寫入彈窗層元素。

其中，在HTML網(wǎng)頁結構中可以插入一個HTML標簽，例如，該HTML標簽可以是DIV標簽。在HTML網(wǎng)頁結構的特定位置插入HTML標簽之后，在該HTML的類(英文名稱：class)中寫入遮罩層元素，在HTML標簽中可以設置section標簽，該section標簽的主要作用就是分段，當元素的內容需要明確的列出時可以使用section標簽，完成內容的列舉內容說明，本發(fā)明實施例中彈窗層元素可以寫入section標簽中，從而完成彈窗層元素在遮罩層元素中的嵌套，可以理解的是，本發(fā)明的一些實施例中寫入的彈窗層元素也可以采用其它的標簽實現(xiàn)方式，例如DIV標簽等。

需要說明的是，在本發(fā)明的一些實施例中，除了步驟A1所示的應用場景中完成遮罩層元素和彈窗層元素之間的層級關系配置之外，還可以在生成HTML網(wǎng)頁結構時在同一個H5標簽中寫入遮罩層元素和彈窗層元素，使得彈窗層元素能夠繼承遮罩層元素的樣式內容。

102、在遮罩層元素關聯(lián)的第一CSS代碼中配置預設的布局樣式。

在本發(fā)明實施例中，從HTML網(wǎng)頁結構中獲取到遮罩層元素和彈窗層元素之后，可以對HTML網(wǎng)頁中的各個圖層元素配置CSS樣式，CSS能更精確的控制網(wǎng)頁版面的文字、背景、字型等，從而可以完成對網(wǎng)頁中局部位置的字體、背景、位置等的進一步配置，通過只修正一個CSS文件，便可同時更新眾多的網(wǎng)頁版面外觀及格式，使HTML的文件內碼更精簡。本發(fā)明實施例將遮罩層元素關聯(lián)的CSS樣式定義為“第一CSS代碼”，將彈窗層元素管理的CSS樣式定義為“第二CSS代碼”，通過第一、第二來區(qū)分兩個圖層元素的CSS樣式。接下來對第一CSS代碼中配置樣式進行說明，本發(fā)明實施例中在第一CSS代碼中可以配置預設的布局樣式，該布局樣式可以取決于應用場景來靈活選取。例如該布局樣式可以是水平垂直居中樣式，該布局樣式也可以是其它的樣式，例如窗體居左樣式，或者窗體居右樣式等。

在本發(fā)明的一些實施例中，步驟102在遮罩層元素關聯(lián)的第一層疊樣式表CSS代碼中配置預設的布局樣式，具體可以包括如下步驟：

B1、將第一CSS代碼中的顯示(英文名稱：display)屬性配置為彈性布局(英文名稱：flex)屬性，使用flex屬性配置預設的布局樣式。

其中，display屬性可以規(guī)定元素應該生成的框類型，在第一CSS代碼中可以使用CSS3的flex屬性，flex屬性可以配置布局樣式是否可伸縮其尺寸，可伸縮元素能夠隨著布局樣式的縮小或擴大而縮寫或放大，使用flex屬性可以完成布局樣式的配置，從而遮罩層元素可以按照該布局樣式來顯示，由于彈窗層元素是嵌套在遮罩層元素中的，因此該彈窗層元素也可以按照在第一CSS代碼中配置的布局樣式來顯示。在本發(fā)明的一些實施例中，除了步驟B1所示的應用場景中完成對第一CSS代碼的配置之外，還可以在遮罩層元素關聯(lián)的第一CSS代碼中寫入具體的布局樣式，可以使用網(wǎng)格(英文名稱:grid)屬性使得遮罩層元素按照該布局樣式進行直接顯示。

103、在彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。

在本發(fā)明實施例中，若彈窗層元素需要配置動畫效果，可以在第二CSS代碼中配置預設的動畫樣式，例如該動畫樣式可以包括彈窗出現(xiàn)的動畫效果以及該彈窗消失的動畫效果，動畫樣式的具體類型可以有多種，例如可以是淡隱淡現(xiàn)顯示彈出層、頂部浮動彈出層等，具體此處不做限定。

在本發(fā)明的一些實施例中，步驟103在彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式，包括：

C1、在第二CSS代碼中動畫開始前添加動畫樣式對應的class，并在第二CSS代碼中動畫結束后移除動畫樣式對應的class。

其中，彈窗層元素需要配置動畫效果時可以先添加一個class，class中可以配置具體采用的動畫效果，彈窗在顯示時可以根據(jù)該class加入動畫效果，動畫結束之后就需要移除對應的class。

舉例說明，在本發(fā)明的一些實施例中，以添加Shrink動畫為例進行說明，不限定的是，本發(fā)明實施例還可以添加其他的動畫效果。例如，步驟C1在第二CSS代碼中添加動畫樣式對應的類class，并在第二CSS代碼中移除動畫樣式對應的類，包括如下步驟：

C11、在第二CSS代碼中的動畫名稱屬性中配置出現(xiàn)動畫(英文名稱：Shrink-in)和消失動畫(英文名稱：Shrink-out)；

C12、為Shrink-in配置動畫樣式對應的不透明級別(英文名稱：opacity)屬性和變形(英文名稱：transform)屬性，為Shrink-out配置動畫樣式對應的opacity屬性和變形transform屬性。

具體的，需要添加和移除的class可以是Shrink-in和Shrink-out，則對于Shrink-in和Shrink-out都可以配置opacity屬性和transform屬性，該transform屬性可以是旋轉(英文名稱：rotate)、扭曲(英文名稱：skew)、縮放(英文名稱：scale)和移動(英文名稱：translate)以及矩陣變形(英文名稱：matrix)等，對于出現(xiàn)動畫和消失動畫的具體配置可以結合應用場景來確定。需要說明的是，上述實施例只是描述具體的動畫名稱屬性中的一種動畫實現(xiàn)方式，對于在彈窗層元素中設置的不同動畫效果可以配置具體的動畫樣式，此處不做限定。可以理解的是，本發(fā)明實施例中Shrink-in也可以只配置opacity屬性，或者只配置transform屬性，具體可以結合應用場景來確定，本發(fā)明實施例中Shrink-out也可以只配置opacity屬性，或者只配置transform屬性，具體可以結合應用場景來確定。

在本發(fā)明的一些實施例中，本發(fā)明實施例提供的網(wǎng)頁中彈窗的處理方法除了執(zhí)行前述步驟101至步驟103之外，該方法還可以包括如下步驟：

D1、根據(jù)第一CSS代碼中的布局樣式和第二CSS代碼中的動畫樣式在網(wǎng)頁顯示區(qū)域對HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素進行顯示。

其中，在對第一CSS代碼和第二CSS代碼完成具體樣式的配置之后，還可以對HTML網(wǎng)頁結構進行顯示，在特定的網(wǎng)頁顯示區(qū)域可以顯示遮罩層元素和彈窗層元素，則彈窗層元素中的彈窗可以按照布局樣式和動畫樣式同時進行顯示。將設定區(qū)域顯示的HTML網(wǎng)頁進行標注顯示，根據(jù)第一CSS代碼和第二CSS代碼中配置的語句不同，從而對應在HTML網(wǎng)頁上顯示該不同的樣式效果，用戶可以查看彈窗的布局樣式和動畫樣式。

通過以上實施例對本發(fā)明實施例的描述可知，獲取HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素，在遮罩層元素關聯(lián)的第一CSS代碼中配置預設的布局樣式，在彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。本發(fā)明實施例中在HTML網(wǎng)頁結構中配置有遮罩層元素，并且該遮罩層元素配置為彈窗層元素的父元素，因此本發(fā)明實施例中彈窗層元素是嵌套在遮罩層元素里面，因此在第一CSS代碼中配置布局樣式后，彈窗層元素也可以按照該布局樣式來顯示，從而不需要進行JS動態(tài)計算。該布局樣式也可以設置為水平垂直居中樣式，并且本發(fā)明實施例中第二CSS代碼中配置動畫樣式，彈窗層元素也可以按照該動畫樣式來顯示。因此本發(fā)明實施例中可以同時實現(xiàn)彈窗的水平垂直居中與動畫效果。

為便于更好的理解和實施本發(fā)明實施例的上述方案，下面舉例相應的應用場景來進行具體說明。

在現(xiàn)有技術中，彈窗在處理水平垂直居中與動畫效果時總要面臨取舍，本發(fā)明實施例中可以完美的同時處理水平垂直居中與動畫效果。本發(fā)明提供的技術方案會同時解決現(xiàn)有技術中彈窗的寬度和高度需要計算問題，也可以解決不能使用transform實現(xiàn)動畫效果和水平垂直居中的問題。

本發(fā)明實施例提供的技術方案可以應用在移動端所有的彈窗上，例如模態(tài)框(英文名稱：modal)，對話框(英文名稱：dialog)，提示框(英文名稱：toast)等，接下來以modal為例說明，其余的dialog，toast可以類比于對modal的實現(xiàn)方式。

首先，優(yōu)化HTML網(wǎng)頁結構，將遮罩層元素與彈窗層元素構成父子元素，而非兄弟元素，具體可以使用的代碼如下：

<div class＝"overlay"><！--遮罩層-->

<section class＝"modal"></section><！--彈窗-->

</div>

接下來可以優(yōu)化遮罩層元素對應的CSS代碼，使用CSS3的flex屬性，flex屬性是Css3布局的方法，主要代碼如下：

其中，align-items適用于父類容器上，設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式，當彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達到其最大值時，justifyContent屬性可協(xié)助對多余的空間進行分配。當元素溢出某行時，justifyContent屬性同樣會在對齊上進行控制。

最后，對需要動畫效果的在modal樣式上直接添加移除對應的class，如下面的shrink-in表示出現(xiàn)動畫，shrink-out表示消失動畫，添加class表示添加對應的動畫，動畫結束之后可以移除對應的class，主要采用的代碼如下：

其中，CSS3animation-duration屬性用于檢索或設置對象動畫的持續(xù)時間，例如0.3s，animation-fill-mode屬性的值為both，標識對象狀態(tài)為動畫結束或開始的狀態(tài)，關鍵幀keyframes中可以添加shrinkIn和shrinkout，opacity表示不透明級別，取值可以是0，或者1，transform屬性設置為scale，scale對應的縮放比例在上述舉例中可以是1或者1.185。

本發(fā)明實施例中，將遮罩層元素和彈窗層元素之間的層級關系調整為父子元素，然后巧妙運用css3的flex布局，完美實現(xiàn)了彈窗的水平垂直居中效果，不需要JS進行動態(tài)計算，也沒有使用transform屬性，不僅節(jié)省了一次JS計算，也為彈窗的動畫效果預留了足夠的空間。

需要說明的是，對于前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技術人員應該知悉，本發(fā)明并不受所描述的動作順序的限制，因為依據(jù)本發(fā)明，某些步驟可以采用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬于優(yōu)選實施例，所涉及的動作和模塊并不一定是本發(fā)明所必須的。

為便于更好的實施本發(fā)明實施例的上述方案，下面還提供用于實施上述方案的相關裝置。

請參閱圖2-a所示，本發(fā)明實施例提供的一種網(wǎng)頁中彈窗的處理裝置200，可以包括：彈窗層嵌套模塊201、布局配置模塊202和動畫配置模塊203，其中，

彈窗層嵌套模塊201，用于獲取超文本標記語言HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將所述遮罩層元素和所述彈窗層元素之間的層級關系配置為父子元素；

布局配置模塊202，用于在所述遮罩層元素關聯(lián)的第一層疊樣式表CSS代碼中配置預設的布局樣式；

動畫配置模塊203，用于在所述彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。

在本發(fā)明的一些實施例中，所述彈窗層嵌套模塊201，具體用于在所述HTML網(wǎng)頁結構中插入HTML標簽，將所述遮罩層元素寫入所述HTML標簽中，并在所述HTML標簽中寫入所述遮罩層元素之后的分段section標簽中繼續(xù)寫入所述彈窗層元素。

在本發(fā)明的一些實施例中，所述布局配置模塊202，具體用于將第一CSS代碼中的顯示display屬性配置為彈性布局flex屬性，使用所述flex屬性配置預設的布局樣式。

在本發(fā)明的一些實施例中，所述動畫配置模塊203，具體用于在第二CSS代碼中動畫開始前添加動畫樣式對應的類class，并在所述第二CSS代碼中動畫結束后移除所述動畫樣式對應的類。

進一步的，在本發(fā)明的一些實施例中，所述動畫配置模塊203，具體用于在第二CSS代碼中的動畫名稱屬性中配置出現(xiàn)動畫Shrink-in和消失動畫Shrink-out；為所述Shrink-in配置所述動畫樣式對應的不透明級別opacity屬性和變形transform屬性，為所述Shrink-out配置所述動畫樣式對應的opacity屬性和變形transform屬性。

在本發(fā)明的一些實施例中，請參閱圖2-b所示，所述網(wǎng)頁中彈窗的處理裝置200，還包括：網(wǎng)頁顯示模塊204，用于根據(jù)所述第一CSS代碼中的布局樣式和所述第二CSS代碼中的動畫樣式在網(wǎng)頁顯示區(qū)域對所述HTML網(wǎng)頁結構中的所述遮罩層元素和所述彈窗層元素進行顯示。

通過以上對本發(fā)明實施例的描述可知，獲取HTML網(wǎng)頁結構中的遮罩層元素和彈窗層元素，并將遮罩層元素和彈窗層元素之間的層級關系配置為父子元素，在遮罩層元素關聯(lián)的第一CSS代碼中配置預設的布局樣式，在彈窗層元素關聯(lián)的第二CSS代碼中配置預設的動畫樣式。本發(fā)明實施例中在HTML網(wǎng)頁結構中配置有遮罩層元素，并且該遮罩層元素配置為彈窗層元素的父元素，因此本發(fā)明實施例中彈窗層元素是嵌套在遮罩層元素里面，因此在第一CSS代碼中配置布局樣式后，彈窗層元素也可以按照該布局樣式來顯示，從而不需要進行JS動態(tài)計算。該布局樣式也可以設置為水平垂直居中樣式，并且本發(fā)明實施例中第二CSS代碼中配置動畫樣式，彈窗層元素也可以按照該動畫樣式來顯示。因此本發(fā)明實施例中可以同時實現(xiàn)彈窗的水平垂直居中與動畫效果。

本發(fā)明實施例還提供了另一種終端，如圖10所示，為了便于說明，僅示出了與本發(fā)明實施例相關的部分，具體技術細節(jié)未揭示的，請參照本發(fā)明實施例方法部分。該終端可以為包括手機、平板電腦、PDA(Personal Digital Assistant，個人數(shù)字助理)、POS(Point of Sales，銷售終端)、車載電腦等任意終端設備，以終端為手機為例：

圖3示出的是與本發(fā)明實施例提供的終端相關的手機的部分結構的框圖。參考圖3，手機包括：射頻(Radio Frequency，RF)電路1010、存儲器1020、輸入單元1030、顯示單元1040、傳感器1050、音頻電路1060、無線保真(wireless fidelity，WiFi)模塊1070、處理器1080、以及電源1090等部件。本領域技術人員可以理解，圖3中示出的手機結構并不構成對手機的限定，可以包括比圖示更多或更少的部件，或者組合某些部件，或者不同的部件布置。

下面結合圖3對手機的各個構成部件進行具體的介紹：

RF電路1010可用于收發(fā)信息或通話過程中，信號的接收和發(fā)送，特別地，將基站的下行信息接收后，給處理器1080處理；另外，將設計上行的數(shù)據(jù)發(fā)送給基站。通常，RF電路1010包括但不限于天線、至少一個放大器、收發(fā)信機、耦合器、低噪聲放大器(Low Noise Amplifier，LNA)、雙工器等。此外，RF電路1010還可以通過無線通信與網(wǎng)絡和其他設備通信。上述無線通信可以使用任一通信標準或協(xié)議，包括但不限于全球移動通訊系統(tǒng)(Global System of Mobile communication，GSM)、通用分組無線服務(General Packet Radio Service，GPRS)、碼分多址(Code Division Multiple Access，CDMA)、寬帶碼分多址(Wideband Code Division Multiple Access,WCDMA)、長期演進(Long Term Evolution，LTE)、電子郵件、短消息服務(Short Messaging Service，SMS)等。

存儲器1020可用于存儲軟件程序以及模塊，處理器1080通過運行存儲在存儲器1020的軟件程序以及模塊，從而執(zhí)行手機的各種功能應用以及數(shù)據(jù)處理。存儲器1020可主要包括存儲程序區(qū)和存儲數(shù)據(jù)區(qū)，其中，存儲程序區(qū)可存儲操作系統(tǒng)、至少一個功能所需的應用程序(比如聲音播放功能、圖像播放功能等)等；存儲數(shù)據(jù)區(qū)可存儲根據(jù)手機的使用所創(chuàng)建的數(shù)據(jù)(比如音頻數(shù)據(jù)、電話本等)等。此外，存儲器1020可以包括高速隨機存取存儲器，還可以包括非易失性存儲器，例如至少一個磁盤存儲器件、閃存器件、或其他易失性固態(tài)存儲器件。

輸入單元1030可用于接收輸入的數(shù)字或字符信息，以及產(chǎn)生與手機的用戶設置以及功能控制有關的鍵信號輸入。具體地，輸入單元1030可包括觸控面板1031以及其他輸入設備1032。觸控面板1031，也稱為觸摸屏，可收集用戶在其上或附近的觸摸操作(比如用戶使用手指、觸筆等任何適合的物體或附件在觸控面板1031上或在觸控面板1031附近的操作)，并根據(jù)預先設定的程式驅動相應的連接裝置?？蛇x的，觸控面板1031可包括觸摸檢測裝置和觸摸控制器兩個部分。其中，觸摸檢測裝置檢測用戶的觸摸方位，并檢測觸摸操作帶來的信號，將信號傳送給觸摸控制器；觸摸控制器從觸摸檢測裝置上接收觸摸信息，并將它轉換成觸點坐標，再送給處理器1080，并能接收處理器1080發(fā)來的命令并加以執(zhí)行。此外，可以采用電阻式、電容式、紅外線以及表面聲波等多種類型實現(xiàn)觸控面板1031。除了觸控面板1031，輸入單元1030還可以包括其他輸入設備1032。具體地，其他輸入設備1032可以包括但不限于物理鍵盤、功能鍵(比如音量控制按鍵、開關按鍵等)、軌跡球、鼠標、操作桿等中的一種或多種。

顯示單元1040可用于顯示由用戶輸入的信息或提供給用戶的信息以及手機的各種菜單。顯示單元1040可包括顯示面板1041，可選的，可以采用液晶顯示器(Liquid Crystal Display，LCD)、有機發(fā)光二極管(Organic Light-Emitting Diode,OLED)等形式來配置顯示面板1041。進一步的，觸控面板1031可覆蓋顯示面板1041，當觸控面板1031檢測到在其上或附近的觸摸操作后，傳送給處理器1080以確定觸摸事件的類型，隨后處理器1080根據(jù)觸摸事件的類型在顯示面板1041上提供相應的視覺輸出。雖然在圖3中，觸控面板1031與顯示面板1041是作為兩個獨立的部件來實現(xiàn)手機的輸入和輸入功能，但是在某些實施例中，可以將觸控面板1031與顯示面板1041集成而實現(xiàn)手機的輸入和輸出功能。

手機還可包括至少一種傳感器1050，比如光傳感器、運動傳感器以及其他傳感器。具體地，光傳感器可包括環(huán)境光傳感器及接近傳感器，其中，環(huán)境光傳感器可根據(jù)環(huán)境光線的明暗來調節(jié)顯示面板1041的亮度，接近傳感器可在手機移動到耳邊時，關閉顯示面板1041和/或背光。作為運動傳感器的一種，加速計傳感器可檢測各個方向上(一般為三軸)加速度的大小，靜止時可檢測出重力的大小及方向，可用于識別手機姿態(tài)的應用(比如橫豎屏切換、相關游戲、磁力計姿態(tài)校準)、振動識別相關功能(比如計步器、敲擊)等；至于手機還可配置的陀螺儀、氣壓計、濕度計、溫度計、紅外線傳感器等其他傳感器，在此不再贅述。

音頻電路1060、揚聲器1061，傳聲器1062可提供用戶與手機之間的音頻接口。音頻電路1060可將接收到的音頻數(shù)據(jù)轉換后的電信號，傳輸?shù)綋P聲器1061，由揚聲器1061轉換為聲音信號輸出；另一方面，傳聲器1062將收集的聲音信號轉換為電信號，由音頻電路1060接收后轉換為音頻數(shù)據(jù)，再將音頻數(shù)據(jù)輸出處理器1080處理后，經(jīng)RF電路1010以發(fā)送給比如另一手機，或者將音頻數(shù)據(jù)輸出至存儲器1020以便進一步處理。

WiFi屬于短距離無線傳輸技術，手機通過WiFi模塊1070可以幫助用戶收發(fā)電子郵件、瀏覽網(wǎng)頁和訪問流式媒體等，它為用戶提供了無線的寬帶互聯(lián)網(wǎng)訪問。雖然圖3示出了WiFi模塊1070，但是可以理解的是，其并不屬于手機的必須構成，完全可以根據(jù)需要在不改變發(fā)明的本質的范圍內而省略。

處理器1080是手機的控制中心，利用各種接口和線路連接整個手機的各個部分，通過運行或執(zhí)行存儲在存儲器1020內的軟件程序和/或模塊，以及調用存儲在存儲器1020內的數(shù)據(jù)，執(zhí)行手機的各種功能和處理數(shù)據(jù)，從而對手機進行整體監(jiān)控?？蛇x的，處理器1080可包括一個或多個處理單元；優(yōu)選的，處理器1080可集成應用處理器和調制解調處理器，其中，應用處理器主要處理操作系統(tǒng)、用戶界面和應用程序等，調制解調處理器主要處理無線通信?？梢岳斫獾氖?，上述調制解調處理器也可以不集成到處理器1080中。

手機還包括給各個部件供電的電源1090(比如電池)，優(yōu)選的，電源可以通過電源管理系統(tǒng)與處理器1080邏輯相連，從而通過電源管理系統(tǒng)實現(xiàn)管理充電、放電、以及功耗管理等功能。

盡管未示出，手機還可以包括攝像頭、藍牙模塊等，在此不再贅述。

在本發(fā)明實施例中，該終端所包括的處理器1080還具有控制執(zhí)行以上由終端執(zhí)行的網(wǎng)頁中彈窗的處理方法流程。

另外需說明的是，以上所描述的裝置實施例僅僅是示意性的，其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部模塊來實現(xiàn)本實施例方案的目的。另外，本發(fā)明提供的裝置實施例附圖中，模塊之間的連接關系表示它們之間具有通信連接，具體可以實現(xiàn)為一條或多條通信總線或信號線。本領域普通技術人員在不付出創(chuàng)造性勞動的情況下，即可以理解并實施。

通過以上的實施方式的描述，所屬領域的技術人員可以清楚地了解到本發(fā)明可借助軟件加必需的通用硬件的方式來實現(xiàn)，當然也可以通過專用硬件包括專用集成電路、專用CPU、專用存儲器、專用元器件等來實現(xiàn)。一般情況下，凡由計算機程序完成的功能都可以很容易地用相應的硬件來實現(xiàn)，而且，用來實現(xiàn)同一功能的具體硬件結構也可以是多種多樣的，例如模擬電路、數(shù)字電路或專用電路等。但是，對本發(fā)明而言更多情況下軟件程序實現(xiàn)是更佳的實施方式?；谶@樣的理解，本發(fā)明的技術方案本質上或者說對現(xiàn)有技術做出貢獻的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在可讀取的存儲介質中，如計算機的軟盤，U盤、移動硬盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、磁碟或者光盤等，包括若干指令用以使得一臺計算機設備(可以是個人計算機，服務器，或者網(wǎng)絡設備等)執(zhí)行本發(fā)明各個實施例所述的方法。

綜上所述，以上實施例僅用以說明本發(fā)明的技術方案，而非對其限制；盡管參照上述實施例對本發(fā)明進行了詳細的說明，本領域的普通技術人員應當理解：其依然可以對上述各實施例所記載的技術方案進行修改，或者對其中部分技術特征進行等同替換；而這些修改或者替換，并不使相應技術方案的本質脫離本發(fā)明各實施例技術方案的精神和范圍。