如何顯示一個對話框，採用javascript只對jQuery Mobile的1.4

Question

我正在尋找一個僅使用JavaScript來顯示一個對話框，該對話框顯示包括：

Title 

(operation icon) Content 

Button(OK) 

但是在我看到的樣品Jquery移動文檔，看起來像是如果我想顯示一個對話框，我必須使用一些html + css代碼，但是我只想用javascript只能用來顯示它。

示例對話框已經不支持新版本jquery mobile，它不工作。

彈出如此醜陋，只有內容，沒有按鈕一樣OK，也沒有關閉按鈕。

那麼有沒有什麼方法可以顯示一個良好的對話框（不像彈出窗口那麼簡單）只能使用javascript？也可以使用Jquery。

Answer 1

jQuery Mobile Popups絕對可以滿足您的要求。包含標題，內容，按鈕和頂角關閉按鈕是沒有問題的。另外，您可以通過腳本添加彈出窗口，而不是頁面中的標記。

舉例來說，如果你有你的頁面上的以下按鈕：

<button id="btnDynamic">Dynamic Popup...</button> 

而且要啓動一個對話框，單擊時，你的腳本可能是這樣的：

$("#btnDynamic").on("click", function() { 
    //create the popup markup 
    var html = CreatePopup("Dynamic", "This popup is created and launched entirely via script"); 
    //append popup to DOM, tell jqm to enhance and initialize the popup 
    // and to remove the popup from DOM on close 
    $("#page1").append(html).find("#mypDialog").enhanceWithin().popup({ 
     afterclose: function (event, ui) { 
      //remove from DOM on close 
      $("#mypDialog").remove(); 
     } 
    }).popup("open", { 
     transition: "flow", 
     positionTo: "window" 
    }); 
    //Add click handler for button in popup 
    $("#mypDialog").on("click", "#btnPopOK", function(){ 
     alert("You clicked OK, I will now close the popup");    
     $("#mypDialog").popup("close"); 
    }); 
}); 

function CreatePopup(title, content){ 
    var html = '<div data-role="popup" id="mypDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false" >'; 
    html += '<div data-role="header"><h1>' + title + '</h1><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a></div>'; 
    html += '<div role="main" class="ui-content"> <h3 class="ui-title">' + content + '</h3><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">Cancel</a><a id="btnPopOK" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="flow">OK</a></div>'; 
    html += '</div>'; 
    return html; 
} 

我正在創建彈出標記爲一個字符串。然後該字符串被附加到data-role =「page」DIV。然後我們找到popup div（我們爲它指定了一個myDialog的id），並告訴jQM增強彈出窗口的內容，用一個afterclose回調函數初始化彈出窗口小部件，一旦關閉就從DOM中刪除彈出窗口，最後命令顯示彈出窗口。我還包括一個OK按鈕單擊的處理程序。

這裏是一個工作DEMO。注意我還在演示中包含了一個靜態彈出窗口。