如何在 Jquery mobile 1.4 上仅使用 javascript 显示对话框

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。然后我们找到弹出的 div（我们为它分配了一个 myDialog 的 id）并告诉 jQM 增强弹出的内容，使用 afterclose 回调初始化弹出小部件，该回调在关闭后从 DOM 中删除弹出，最后是命令显示弹出窗口。我还包含了一个单击 OK 按钮的处理程序。

这是一个有效的 DEMO。请注意，我还在 DEMO 中包含了一个静态弹出窗口。