Question

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

Title

 (operation icon) Content

Button(OK)

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

示例对话框已不支持新版Jquery mobile ，但它无效。

弹出窗口很丑陋，只有内容，而不是按钮就好，也没有关闭按钮。

那么有没有办法可以显示一个好的对话框（不像popup那么简单）只使用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 。注意我还在DEMO中包含了一个静态弹出窗口。

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

1 个答案: