Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Display a themed modal alert #1012

Closed
Closed
@JamesNK

Description

@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

Activity

toddparker

toddparker commented on Mar 14, 2011

@toddparker
Contributor

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

mrextreme

mrextreme commented on Mar 28, 2013

@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' );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @JamesNK@toddparker@mrextreme

        Issue actions

          Display a themed modal alert · Issue #1012 · jquery-archive/jquery-mobile