CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
qakmak
qakmak

Reputation: 1377

How display a dialog use javascript only on Jquery mobile 1.4

I'm looking for a way only use javascript to display a dialog , The dialog display include:

Title

 (operation icon) Content

Button(OK)

But after I see the sample in the Jquery mobile document, Looks like If I want to display a dialog, I must use some html+css code, But I just want to use javascript only to display it.

The sample dialog already not support the new version Jquery mobile, it's not working.

the popup so ugly, only has content, not button like OK, also no close button.

So Is there any way can display a good dialog(not so simple like popup) only use javascript? Also can use Jquery.

Upvotes: 0

Views: 782

Answers (1)

ezanker
ezanker

Reputation: 24738

jQuery Mobile Popups can absolutely handle your requirements. It is no problem to include titles, content, buttons, and a top corner close button. Additionally you can add the popup via script instead of markup in the page.

For example, if you have the following button on your page:

<button id="btnDynamic">Dynamic Popup...</button>

And you want to launch a dialog when it is clicked, your script could be something like this:

$("#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;
}

I am creating the popup markup as a string. That string is then appended to the data-role="page" DIV. We then find the popup div (We assigned an id of myDialog to it) and tell jQM to enhance the content of the popup, initialize the popup widget with an afterclose callback that removes the popup from the DOM once closed, and finally the command to show the popup. I have also included a handler for the OK button click.

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

Upvotes: 1

Related Questions