Display a themed modal alert

[JamesNK]

I'd like some way to display a modal alert using JQuery Mobile.

I don't know if there is an issue for it but I found a forum post here asking for the same feature - http://forum.jquery.com/topic/alert-modal-component

[toddparker]

Good idea, added as a feature request here:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[mrextreme]

I needed (well, wanted) this feature myself for the project I am working on. Here is what I came up with. It is not a jQM widget (yet), but I am looking into doing that. It simply uses the popup widget, so the chaining issues do apply on it. Also uses the button widget.

It's a quick solution to a simple problem, so please look at it as such. I hope it helps.

The most basic call is jqmAlert( messageString ); However, it accepts a second argument, which must be an object. In that object you can overwrite your default settings. But maybe most importantly, you can pass a callback function (buttonAction) to be called when the user hits the OK button.

.jqmAlert
{
    padding: 1em;
    text-align: center;
    min-width: 8em;
    max-width: 20em;
    font-weight: bold;
}

.jqmAlertMessage
{
    margin-bottom: 1.5em;
}

// everyone's favourite, a global variable
// keeps track of already created popups to save us some time - might be just an overengineering...
var jqmAlertPageIds = [];

function jqmAlert( msg, params )
{
    var options = {
            history: false,
            dismissible: false,
            corners: true,
            shadow: false,
            theme: 'a',
            buttonTheme: 'c',
            buttonLabel: 'OK',
            buttonAction: null
        };

    if( typeof( params ) == 'object' )
        $.extend( options, params );

    activePageId = $( '.ui-page-active' ).attr( 'id' );
    alertId = activePageId + '-jqmAlert';

    if( jqmAlertPageIds[ activePageId ] === undefined )
    {
        alertHtml = '<div id="' + alertId + '" class="jqmAlert" data-role="popup" data-history="' + options.history.toString() + '" data-dismissible="' + options.dismissible.toString() + '" ' +
                    'data-corners="' + options.corners.toString() + '" data-position-to="window" data-shadow="' + options.shadow.toString() + '" data-theme="' + options.theme  + '">' +
                        '<div id="' + alertId + '-msg" class="jqmAlertMessage"></div>' +
                        '<a id="' + alertId + '-close" data-role="button" data-theme="' + options.buttonTheme + '" data-inline="true">' + options.buttonLabel + '</a>' +
                    '</div>';

        $( '#' + activePageId ).append( alertHtml );
        $( '#' + alertId + '-close' ).button();
        $( '#' + alertId ).popup();

        jqmAlertPageIds[ activePageId ] = true;
    }

    $( '#' + alertId + '-msg' ).html( msg  );

    $( '#' + alertId + '-close' ).off().on( 'click', function()
    {
        $( '#' + alertId ).popup( 'close' );

        if( $.isFunction( options.buttonAction ) )
            options.buttonAction();
    });

    $( '#' + alertId ).popup( 'open' );
}