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

Question

我正在寻找一种只使用javascript来显示对话框的方法，对话框显示包括：

Title

 (operation icon) Content

Button(OK)

但是在我看到 Jquery 移动文档中的示例后，看起来如果我想显示一个对话框，我 必须使用一些 html+css代码，但是我只想用javascript只来显示

示例对话框已经不支持新版本Jquery移动，它不工作。

弹窗太难看了，只有内容，没有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 增强弹出窗口的内容，使用关闭后回调初始化弹出窗口小部件，该回调从 DOM 中删除弹出窗口一旦关闭，最后显示弹出窗口的命令。我还包含了一个用于单击“确定”按钮的处理程序。

Here is a working DEMO. Note I have also included a static popup in the DEMO.

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

How display a dialog use javascript only on Jquery mobile 1.4

javascript

jquery

jquery-mobile