本發(fā)明涉及信息處理技術(shù)領(lǐng)域，具體地，涉及一種創(chuàng)建模態(tài)對(duì)話框的方法及裝置。

背景技術(shù)：

對(duì)話框是HTML頁(yè)面上經(jīng)常出現(xiàn)的一種供用戶與瀏覽器進(jìn)行交互的窗口。對(duì)話框可以分為模態(tài)對(duì)話框和非模態(tài)對(duì)話框。模態(tài)對(duì)話框與非模態(tài)對(duì)話框的區(qū)別在于：模態(tài)對(duì)話框限定用戶只能針對(duì)模態(tài)對(duì)話框上呈現(xiàn)的各種選項(xiàng)進(jìn)行操作，用戶針對(duì)模態(tài)對(duì)話框以外的選項(xiàng)或按鈕所進(jìn)行的操作，瀏覽器不予響應(yīng)。

相關(guān)技術(shù)中，創(chuàng)建模態(tài)對(duì)話框是通過第三方組件實(shí)現(xiàn)的，因此，需要對(duì)現(xiàn)有代碼進(jìn)行較大的改動(dòng)，并且所依賴的功能較多。

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

本發(fā)明的目的是提供一種創(chuàng)建模態(tài)對(duì)話框的方法及裝置，采用該方法創(chuàng)建模態(tài)對(duì)話框無(wú)需對(duì)現(xiàn)有代碼進(jìn)行較大的改動(dòng)。

為了實(shí)現(xiàn)上述目的，本發(fā)明提供一種創(chuàng)建模態(tài)對(duì)話框的方法，所述方法包括：

調(diào)用目標(biāo)函數(shù)，所述目標(biāo)函數(shù)用于在HTML頁(yè)面上創(chuàng)建模態(tài)對(duì)話框；

利用HTML標(biāo)簽在所述HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框；

監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)；

在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值；

調(diào)用所述目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)所述返回值進(jìn)行處理。

可選地，所述方法還包括：

在所述目標(biāo)函數(shù)的參數(shù)中包括所述回調(diào)函數(shù)時(shí)，將所述返回值返回給所述回調(diào)函數(shù)。

可選地，所述方法還包括：

在所述目標(biāo)函數(shù)的參數(shù)中未包括所述回調(diào)函數(shù)時(shí)，暫停對(duì)所述目標(biāo)函數(shù)之后的代碼的執(zhí)行；

在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值之后，所述方法還包括：

繼續(xù)執(zhí)行所述目標(biāo)函數(shù)之后的代碼，以對(duì)所述返回值進(jìn)行處理。

可選地，所述監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)，包括：

檢測(cè)所述對(duì)話框上的關(guān)閉按鈕是否被用戶按下；或

判斷所述對(duì)話框是否滿足預(yù)定條件，所述對(duì)話框在滿足所述預(yù)定條件時(shí)自動(dòng)關(guān)閉。

可選地，所述HTML標(biāo)簽為dialog標(biāo)簽或div標(biāo)簽。

本發(fā)明實(shí)施例還提供一種創(chuàng)建模態(tài)對(duì)話框的裝置，所述裝置包括：

第一調(diào)用模塊，用于調(diào)用目標(biāo)函數(shù)，所述目標(biāo)函數(shù)用于在HTML頁(yè)面上創(chuàng)建模態(tài)對(duì)話框；

創(chuàng)建模塊，用于利用HTML標(biāo)簽在所述HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框；

監(jiān)聽模塊，用于監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)；

響應(yīng)模塊，用于在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值；

第二調(diào)用模塊，用于調(diào)用所述目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)所述返回值進(jìn)行處理。

可選地，所述裝置還包括：

發(fā)送模塊，用于在所述目標(biāo)函數(shù)的參數(shù)中包括所述回調(diào)函數(shù)時(shí)，將所述返回值返回給所述回調(diào)函數(shù)。

可選地，所述裝置還包括：

控制模塊，用于在所述目標(biāo)函數(shù)的參數(shù)中未包括所述回調(diào)函數(shù)時(shí)，暫停對(duì)所述目標(biāo)函數(shù)之后的代碼的執(zhí)行；

執(zhí)行模塊，用于在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值之后，繼續(xù)執(zhí)行所述目標(biāo)函數(shù)之后的代碼，以對(duì)所述返回值進(jìn)行處理。

可選地，所述監(jiān)聽模塊用于：

檢測(cè)所述對(duì)話框上的關(guān)閉按鈕是否被用戶按下；或

判斷所述對(duì)話框是否滿足預(yù)定條件，所述對(duì)話框在滿足所述預(yù)定條件時(shí)自動(dòng)關(guān)閉。

可選地，所述HTML標(biāo)簽為dialog標(biāo)簽或div標(biāo)簽。

通過上述技術(shù)方案，利用HTML標(biāo)簽在HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框，在監(jiān)聽到用于關(guān)閉所述對(duì)話框的事件被觸發(fā)的情況下，響應(yīng)該事件并生成返回值，最后調(diào)用目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)返回值進(jìn)行處理。因此，實(shí)現(xiàn)了將通過HTML標(biāo)簽生成的對(duì)話框模擬成模態(tài)對(duì)話框，無(wú)需對(duì)現(xiàn)有代碼進(jìn)行較大的改動(dòng)。

本發(fā)明的其他特征和優(yōu)點(diǎn)將在隨后的具體實(shí)施方式部分予以詳細(xì)說明。

附圖說明

附圖是用來(lái)提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說明書的一部分，與下面的具體實(shí)施方式一起用于解釋本發(fā)明，但并不構(gòu)成對(duì)本發(fā)明的限制。在附圖中：

圖1為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的方法的流程圖。

圖2為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的方法的另一流程圖。

圖3為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的方法的另一流程圖。

圖4為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的裝置的框圖。

具體實(shí)施方式

以下結(jié)合附圖對(duì)本發(fā)明的具體實(shí)施方式進(jìn)行詳細(xì)說明。應(yīng)當(dāng)理解的是，此處所描述的具體實(shí)施方式僅用于說明和解釋本發(fā)明，并不用于限制本發(fā)明。

請(qǐng)參考圖1，圖1為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的方法的流程圖。該方法包括以下步驟：

步驟S11：調(diào)用目標(biāo)函數(shù)，所述目標(biāo)函數(shù)用于在HTML頁(yè)面上創(chuàng)建模態(tài)對(duì)話框；

步驟S12：利用HTML標(biāo)簽在所述HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框；

步驟S13：監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)；

步驟S14：在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值；

步驟S15：調(diào)用所述目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)所述返回值進(jìn)行處理。

本發(fā)明實(shí)施例中，在需要?jiǎng)?chuàng)建模態(tài)對(duì)話框時(shí)，即可調(diào)用目標(biāo)函數(shù)，目標(biāo)函數(shù)用于在HTML頁(yè)面上創(chuàng)建模態(tài)對(duì)話框。目標(biāo)函數(shù)可以表示為：function showModalDialog(url,args,opts,callback){…}。其中，目標(biāo)函數(shù)的參數(shù)有四個(gè)，分別為：url,args,opts,callback。url表示統(tǒng)一資源定位符(Uniform Resource Locator)。callback表示回調(diào)函數(shù)。

由于相關(guān)技術(shù)中，在創(chuàng)建模態(tài)對(duì)話框時(shí)通常使用的瀏覽器原本支持的showModalDialog函數(shù)，新版本的瀏覽器中(比如Chrome)已經(jīng)不支持該函數(shù)。因此，本公開針對(duì)不支持該函數(shù)的瀏覽器，提供上述目標(biāo)函數(shù)，在用法上盡量和原來(lái)一致，以確保對(duì)現(xiàn)有代碼的改動(dòng)很小。

在調(diào)用目標(biāo)函數(shù)之后，目標(biāo)函數(shù)被執(zhí)行。目標(biāo)函數(shù)被執(zhí)行的過程包括：首先，利用HTML標(biāo)簽在HTML頁(yè)面上創(chuàng)建對(duì)話框，并顯示給用戶。然后，監(jiān)聽用于關(guān)閉對(duì)話框的事件是否被觸發(fā)。

舉例來(lái)講，用戶打開瀏覽器，并打開了多個(gè)HTML頁(yè)面，當(dāng)用戶想要關(guān)閉瀏覽器時(shí)，點(diǎn)擊用戶關(guān)閉瀏覽器的按鈕，此時(shí)，需要?jiǎng)?chuàng)建模態(tài)對(duì)話框，以向用戶確認(rèn)是否要關(guān)閉瀏覽器，則調(diào)用目標(biāo)函數(shù)。

在調(diào)用目標(biāo)函數(shù)之后，首先利用HTML標(biāo)簽在HTML頁(yè)面上創(chuàng)建對(duì)話框，并顯示給用戶，該對(duì)話框用于模擬模態(tài)對(duì)話框。為了使用該對(duì)話框模擬出模態(tài)對(duì)話框，還需要將模態(tài)對(duì)話框所具有的功能賦予給該對(duì)話框。因此，需要監(jiān)聽用于關(guān)閉對(duì)話框的事件是否被觸發(fā)。

在監(jiān)聽到用于關(guān)閉對(duì)話框的事件被觸發(fā)的情況下，執(zhí)行以下步驟，以實(shí)現(xiàn)將將模態(tài)對(duì)話框所具有的功能賦予給該對(duì)話框：

首先，響應(yīng)該事件并生成返回值；

然后，調(diào)用目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)返回值進(jìn)行處理。

其中，返回值可以是用戶輸入的信息，例如：用戶輸入的校驗(yàn)碼。返回值還可以是根據(jù)用戶所選擇的選項(xiàng)，所生成的具有特定含義的值，例如：用戶選擇的選項(xiàng)為是，則返回值為1，表示用戶確認(rèn)要關(guān)閉瀏覽器；用戶選擇的選項(xiàng)為否，則返回值為0，表示用戶要保持瀏覽器處于打開狀態(tài)。

本發(fā)明實(shí)施例中，目標(biāo)函數(shù)的參數(shù)中包括回調(diào)函數(shù)，通過調(diào)用回調(diào)函數(shù)，由回調(diào)函數(shù)對(duì)返回值進(jìn)行處理。進(jìn)而模擬出模態(tài)對(duì)話框具有的功能。因此，實(shí)現(xiàn)了將通過HTML標(biāo)簽生成的對(duì)話框模擬成模態(tài)對(duì)話框，無(wú)需對(duì)現(xiàn)有代碼進(jìn)行較大的改動(dòng)。

可選地，在所述目標(biāo)函數(shù)的參數(shù)中包括所述回調(diào)函數(shù)時(shí)，將所述返回值返回給所述回調(diào)函數(shù)。

請(qǐng)參考圖2，圖2為本發(fā)明實(shí)施例提供的一種創(chuàng)建模態(tài)對(duì)話框的方法的另一流程圖。如圖2所示，該方法除包括步驟S11-步驟S15外，還包括以下步驟：

步驟S14b：在所述目標(biāo)函數(shù)的參數(shù)中包括所述回調(diào)函數(shù)時(shí)，將所述返回值返回給所述回調(diào)函數(shù)。

具體來(lái)講，為了便于回調(diào)函數(shù)對(duì)返回值進(jìn)行處理，在生成返回值之后，需要將返回值返回給回調(diào)函數(shù)。為了提高處理效率，避免不必要的數(shù)據(jù)傳輸或者產(chǎn)生錯(cuò)誤，可以首先判斷目標(biāo)函數(shù)的參數(shù)中是否包括回調(diào)函數(shù)，在判定目標(biāo)函數(shù)的參數(shù)中包括回調(diào)函數(shù)時(shí)，執(zhí)行步驟S14b，將返回值返回給回調(diào)函數(shù)。

可選地，在所述目標(biāo)函數(shù)的參數(shù)中未包括所述回調(diào)函數(shù)時(shí)，暫停對(duì)所述目標(biāo)函數(shù)之后的代碼的執(zhí)行；

相應(yīng)地，在步驟S14之后，所述方法還包括：

繼續(xù)執(zhí)行所述目標(biāo)函數(shù)之后的代碼，以對(duì)所述返回值進(jìn)行處理。

為了兼容參數(shù)中不包括回調(diào)函數(shù)的目標(biāo)函數(shù)，可以通過拋異常的方式暫停目標(biāo)函數(shù)之后的代碼的執(zhí)行，在執(zhí)行完步驟S14，生成返回值之后，再通過eval函數(shù)繼續(xù)執(zhí)行目標(biāo)函數(shù)之后的代碼，由目標(biāo)函數(shù)之后的代碼對(duì)返回值進(jìn)行處理。

本發(fā)明實(shí)施例中，針對(duì)目標(biāo)函數(shù)包括回調(diào)函數(shù)的情況以及目標(biāo)函數(shù)不包括回調(diào)函數(shù)的情況，分別提出不同的處理方式，以對(duì)返回值進(jìn)行處理。進(jìn)而進(jìn)而模擬出模態(tài)對(duì)話框具有的功能。適用范圍廣泛。

可選地，所述監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)，包括：

檢測(cè)所述對(duì)話框上的關(guān)閉按鈕是否被按下；或

判斷所述對(duì)話框是否滿足預(yù)定條件，所述對(duì)話框在滿足所述預(yù)定條件時(shí)自動(dòng)關(guān)閉。

具體來(lái)講，觸發(fā)用于關(guān)閉對(duì)話框的事件可以是由用戶觸發(fā)的，也可以是對(duì)話框主動(dòng)觸發(fā)的。一種可能的情況是：對(duì)話框上有關(guān)閉按鈕，用戶點(diǎn)擊關(guān)閉按鈕即觸發(fā)了用于關(guān)閉對(duì)話框的事件。另一種可能的情況是：對(duì)話框上沒有關(guān)閉按鈕，對(duì)話框在滿足預(yù)定條件時(shí)自動(dòng)關(guān)閉。例如：對(duì)話框持續(xù)呈現(xiàn)預(yù)定時(shí)長(zhǎng)后會(huì)自動(dòng)關(guān)閉，則對(duì)話框自動(dòng)關(guān)閉的時(shí)刻到期即觸發(fā)了用于關(guān)閉對(duì)話框的事件。又例如：對(duì)話框呈現(xiàn)的是某個(gè)任務(wù)(例如：上傳文件)的執(zhí)行進(jìn)度，在執(zhí)行進(jìn)度為100％時(shí)，對(duì)話框自動(dòng)關(guān)閉，則任務(wù)執(zhí)行進(jìn)度為100％的事件觸發(fā)了用于關(guān)閉對(duì)話框的事件。

因此，監(jiān)聽用于關(guān)閉對(duì)話框的事件需要從兩方面進(jìn)行：一方面是檢測(cè)對(duì)話框上的關(guān)閉按鈕是否被用戶按下，另一方面是判斷對(duì)話框是否滿足預(yù)定條件。

本發(fā)明實(shí)施例中，提供了兩種監(jiān)聽關(guān)閉對(duì)話框的方法，相應(yīng)地，針對(duì)用于關(guān)閉對(duì)話框的事件的兩種不同情況，均適用于本發(fā)明實(shí)施例提供的創(chuàng)建模態(tài)對(duì)話框的方法，擴(kuò)展適用范圍。

可選地，所述HTML標(biāo)簽為dialog標(biāo)簽或div標(biāo)簽。

本發(fā)明實(shí)施例中，可以采用dialog標(biāo)簽創(chuàng)建對(duì)話框，也可以采用div標(biāo)簽創(chuàng)建對(duì)話框。采用div標(biāo)簽創(chuàng)建對(duì)話框的不同之處在于，需要用CSS設(shè)置div標(biāo)簽的樣式。

當(dāng)采用dialog標(biāo)簽創(chuàng)建對(duì)話框時(shí)，可以監(jiān)聽dialog標(biāo)簽的close事件，如果監(jiān)聽到dialog標(biāo)簽的close事件，則用于關(guān)閉對(duì)話框的事件被觸發(fā)。當(dāng)采用div標(biāo)簽創(chuàng)建對(duì)話框時(shí)，可以檢測(cè)針對(duì)對(duì)話框上的關(guān)閉按鈕的點(diǎn)擊操作，如果檢測(cè)到針對(duì)對(duì)話框上的關(guān)閉按鈕的點(diǎn)擊操作，則用于關(guān)閉對(duì)話框的事件被觸發(fā)。

本發(fā)明實(shí)施例中，提供了利用div標(biāo)簽創(chuàng)建模態(tài)對(duì)話框，確保不同瀏覽器間的界面基本一致。適用于不同的瀏覽器。由于各種版本的瀏覽器都支持div標(biāo)簽，所以本發(fā)明實(shí)施例提供的創(chuàng)建模態(tài)對(duì)話框的方法適用于各種版本的瀏覽器。

下面對(duì)本發(fā)明實(shí)施例提供的創(chuàng)建模態(tài)對(duì)話框的方法進(jìn)行整體說明。請(qǐng)參考圖3，圖3為本發(fā)明實(shí)施例提供的創(chuàng)建模態(tài)對(duì)話框的方法的另一流程圖。該方法包括：

1)在需要?jiǎng)?chuàng)建模態(tài)對(duì)話框的情況下，調(diào)用目標(biāo)函數(shù)；

2)利用HTML標(biāo)簽在HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框；

3)監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)；

4)在監(jiān)聽到該事件被觸發(fā)的情況下，判斷目標(biāo)函數(shù)的參數(shù)中是否包括回調(diào)函數(shù)，如果目標(biāo)函數(shù)的參數(shù)中包括回調(diào)函數(shù)，則轉(zhuǎn)入步驟5)至步驟6a)；如果目標(biāo)函數(shù)的參數(shù)中未包括回調(diào)函數(shù)，則暫停對(duì)目標(biāo)函數(shù)之后的代碼的執(zhí)行，然后轉(zhuǎn)入步驟5)至步驟6b)；

5)響應(yīng)該事件并生成返回值；

6a)將返回值返回給回調(diào)函數(shù)，以對(duì)返回值進(jìn)行處理；

6b)繼續(xù)執(zhí)行目標(biāo)函數(shù)之后的代碼，以對(duì)返回值進(jìn)行處理。

基于同一發(fā)明構(gòu)思，本發(fā)明實(shí)施例還提供一種創(chuàng)建模態(tài)對(duì)話框的裝置。請(qǐng)參考圖4，圖4為本發(fā)明實(shí)施例提供的創(chuàng)建模態(tài)對(duì)話框的裝置的框圖。該裝置100包括：

第一調(diào)用模塊121，用于調(diào)用目標(biāo)函數(shù)，所述目標(biāo)函數(shù)用于在HTML頁(yè)面上創(chuàng)建模態(tài)對(duì)話框；

創(chuàng)建模塊122，用于利用HTML標(biāo)簽在所述HTML頁(yè)面上創(chuàng)建并顯示對(duì)話框；

監(jiān)聽模塊123，用于監(jiān)聽用于關(guān)閉所述對(duì)話框的事件是否被觸發(fā)；

響應(yīng)模塊124，用于在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值；

第二調(diào)用模塊125，用于調(diào)用所述目標(biāo)函數(shù)的參數(shù)中包括的回調(diào)函數(shù)，以對(duì)所述返回值進(jìn)行處理。

可選地，所述裝置還包括：

發(fā)送模塊，用于在所述目標(biāo)函數(shù)的參數(shù)中包括所述回調(diào)函數(shù)時(shí)，將所述返回值返回給所述回調(diào)函數(shù)。

可選地，所述裝置還包括：

控制模塊，用于在所述目標(biāo)函數(shù)的參數(shù)中未包括所述回調(diào)函數(shù)時(shí)，暫停對(duì)所述目標(biāo)函數(shù)之后的代碼的執(zhí)行；

執(zhí)行模塊，用于在監(jiān)聽到所述事件被觸發(fā)的情況下，響應(yīng)所述事件并生成返回值之后，繼續(xù)執(zhí)行所述目標(biāo)函數(shù)之后的代碼，以對(duì)所述返回值進(jìn)行處理。

可選地，所述監(jiān)聽模塊用于：

檢測(cè)所述對(duì)話框上的關(guān)閉按鈕是否被用戶按下；或

監(jiān)聽所述對(duì)話框是否滿足預(yù)定條件，所述對(duì)話框在滿足所述預(yù)定條件時(shí)自動(dòng)關(guān)閉。

可選地，所述HTML標(biāo)簽為dialog標(biāo)簽或div標(biāo)簽。

關(guān)于上述實(shí)施例中的系統(tǒng)，其中各個(gè)模塊執(zhí)行操作的具體方式已經(jīng)在有關(guān)該方法的實(shí)施例中進(jìn)行了詳細(xì)描述，此處將不做詳細(xì)闡述說明。

以上結(jié)合附圖詳細(xì)描述了本發(fā)明的優(yōu)選實(shí)施方式，但是，本發(fā)明并不限于上述實(shí)施方式中的具體細(xì)節(jié)，在本發(fā)明的技術(shù)構(gòu)思范圍內(nèi)，可以對(duì)本發(fā)明的技術(shù)方案進(jìn)行多種簡(jiǎn)單變型，這些簡(jiǎn)單變型均屬于本發(fā)明的保護(hù)范圍。

另外需要說明的是，在上述具體實(shí)施方式中所描述的各個(gè)具體技術(shù)特征，在不矛盾的情況下，可以通過任何合適的方式進(jìn)行組合，為了避免不必要的重復(fù)，本發(fā)明對(duì)各種可能的組合方式不再另行說明。

此外，本發(fā)明的各種不同的實(shí)施方式之間也可以進(jìn)行任意組合，只要其不違背本發(fā)明的思想，其同樣應(yīng)當(dāng)視為本發(fā)明所公開的內(nèi)容。