[發明專利]網頁彈窗的方法及系統

在審

• 申請號: 201711328666.X
• 申請日: 2017-12-13
• 公開（公告）號: CN107908793A
• 公開（公告）日: 2018-04-13
• 發明（設計）人: 黃君
• 申請（專利權）人: 上海攜程商務有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 上海弼興律師事務所31283
• 代理人: 薛琦,鄧忠紅

技術領域

本發明涉及互聯網應用開發領域，特別涉及一種網頁彈窗的方法及系統。

背景技術

現有技術中JQuery(—種輕量級的優秀的JavaScript(一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言)開發框架)的UI(用戶界面)庫中的彈窗插件是一款被廣泛使用的插件，它基于JQuery框架被以插件形式發布。使用者需在使用該彈窗插件的頁面引入所需的JavaScript文件，并在該頁面實例化彈窗組件、配置彈窗樣式和內容，該彈窗插件內部提供了一些對彈窗樣式控制、可視性控制等的方法，也提供基于iframe(一種網頁中可用的控件，用于顯示外部或遠程載入的頁面)的外部頁面調用功能，但是頻繁使用外部插件中的功能性彈窗會導致重復訪問服務器以加載對應的彈窗內容，而這些加載的內容中包括許多彈窗不需要的內容，因而會造成服務器帶寬開支過多以及彈窗加載時間消耗過長的問題；另外，還存在頁面過長彈窗后容易誤碰使得頁面上下浮動的問題，使得手機端等各類移動終端使用不便，用戶體驗度不高。

發明內容

本發明要解決的技術問題是為了克服現有技術中因頻繁使用外部插件中的功能性彈窗會造成服務器帶寬開支過多、彈窗加載時間消耗過長以及頁面過長彈窗后容易上下浮動使用不便的缺陷，提供一種實現方式簡單、服務器帶寬開支少、彈窗加載時間短且用戶使用方便的網頁彈窗的方法及系統。

本發明是通過下述技術方案來解決上述技術問題：

本發明提供了一種網頁彈窗的方法，其特點在于，包括以下步驟：

生成一html(超文本標記語言)的網頁框架；

在所述網頁框架中插入JQuery框架；

在所述網頁框架中使用CSS(層疊樣式表)設置彈窗背景的樣式；

在彈窗按鈕上綁定點擊事件，所述點擊事件包括顯示彈窗及使用JQuery對標簽Layer獲取頁面所在瀏覽器的頁面高度；

當接收到所述彈窗按鈕的點擊信號時加載所述彈窗并判斷所述彈窗背景中主體內容的高度是否大于所述瀏覽器的頁面高度，若是則隱藏所述彈窗背景中的滾動條。

較佳地，所述樣式包括所述彈窗背景的長、寬、高、位置和背景顏色。

較佳地，所述生成一html的網頁框架，包括：

創建外層的div(層疊樣式表中的定位技術)，在所述div中創建所述彈窗以及所述彈窗背景。

較佳地，在所述網頁框架中使用CSS設置彈窗背景的樣式，包括：

在所述網頁框架中插入style(設置樣式的標簽)，在所述style內部設置彈窗背景的樣式，設置溢出隱藏。

本發明還提供了一種網頁彈窗的系統，其特點在于，包括框架生成模塊、第一插入模塊、樣式設置模塊、按鈕處理模塊和高度處理模塊；

所述框架生成模塊用于生成一html的網頁框架；

所述第一插入模塊用于在所述網頁框架中插入JQuery框架；

所述樣式設置模塊用于在所述網頁框架中使用CSS設置彈窗背景的樣式；

所述按鈕處理模塊用于在彈窗按鈕上綁定點擊事件，所述點擊事件包括顯示彈窗及使用JQuery對標簽Layer獲取頁面所在瀏覽器的頁面高度；

所述高度處理模塊用于當接收到所述彈窗按鈕的點擊信號時加載所述彈窗并判斷所述彈窗背景中主體內容的高度是否大于所述瀏覽器的頁面高度，若是則隱藏所述彈窗背景中的滾動條。

較佳地，所述樣式包括所述彈窗背景的長、寬、高、位置和背景顏色。

較佳地，所述框架生成模塊包括創建模塊，所述創建模塊用于創建外層的div，在所述div中創建所述彈窗以及所述彈窗背景。

較佳地，所述樣式設置模塊包括第二插入模塊、第一設置模塊和第二設置模塊；

所述第二插入模塊用于在所述網頁框架中插入style；

所述第一設置模塊用于在所述style內部設置彈窗背景的樣式；

所述第二設置模塊用于設置溢出隱藏。

本發明的積極進步效果在于：本發明提供的網頁彈窗的方法及系統基于JQuery框架與CSS的功能模塊實現了一種全新的網頁彈窗的方式，本方式避免了使用現有的彈窗插件時因為加載太多不需要的功能而導致加載時間過長以及增加服務器帶寬開支的問題，本發明提供的網頁彈窗的實現方式簡單、服務器帶寬開支少、彈窗加載時間短，在彈窗背景中主體內容的高度大于瀏覽器的頁面高度時能夠隱藏彈窗背景中的滾動條，避免了頁面過長彈窗存在上下浮動的問題，用戶無論是在手機端還是其他移動端使用時都很方便。

附圖說明