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。注意我還在演示中包含了一個靜態彈出窗口。
看看這一個http://stackoverflow.com/a/16778646/1181310 – 2015-02-07 20:37:08