Call div inside a function

Question

I\'m trying to create a popup similar to an iOS alert view, with jQuery mobile 1.4.3. I need my warning messages to be triggered from javascript events, like a confirmation mess

Answer 1

jQuery Mobile's Popup widget has many ways to manipulate it. It can be called by a button or opened programmatically. The structure is simple, however, note that only page div should be the direct parent of a popup.

<div data-role="page">
  <div data-role="popup" id="foo">
    <!-- content -->
  </div>
</div>

To open it statically by a button or an anchor:

<a href="#foo" data-rel="popup" data-transition="pop">Popup</a>

To open it programmatically:

$("#foo").popup("open");

Also, you can use special events for any purpose you want, e.g. popupafteropen and popupafterclose.

The below is an example of a dynamically created popup.

// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');

// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";

// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    width: $(window).width() / 1.5 + "px",
    padding: 5 + "px"
}).append(closeBtn).append(content);

// Append it to active page
$.mobile.pageContainer.pagecontainer("getActivePage").append(popup);

// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* custom position
        x: 150, 
        y: 200 */
    });
}).popup({
    dismissible: false,
    history: false,
    theme: "b",
    /* or a */
    overlayTheme: "b",
    /* or a */
    transition: "pop"
}).popup("open");

Demo