如何显示一个对话框，采用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。注意我还在演示中包含了一个静态弹出窗口。