Home > JQuery, JQuery Mobile > Popup / Message Box in JQuery Mobile

Popup / Message Box in JQuery Mobile

November 17, 2011 Leave a comment Go to comments

JQuery Mobile:
JQuery Mobile is a new technology to develop device independent web site or app for iPhone, Android, blackberry etc.

You can see the details in website http://jquerymobile.com . Currently JQuery Mobile 1.0 RC3 is released. The JQuery Mobile team is working very hard and expect things will be more beautifull soon.

You can see the device supported by JQuery Mobile here http://jquerymobile.com/gbs/ .
As I am going to show you how can you develop a nice message box /popup for JQuery mobile eventually I will give you an API by which you can show popup in your JQuery mobile app, I am not describe the details of JQuery Mobile here.

I have made search in the web to find a nice popup or message box where I can add options like ok/ cancel/yes/no etc. and also I can modify and customize myself.

I found something in http://dev.jtsage.com/jQM-SimpleDialog/ which can be used for showing dialog and popup. But it makes something difficult for me when the page size is small or when I saw in mobile. The problem is it then show the top cross button and some other things. But I want something like a real popup message.

I also found another plugin JQuery-mobile-toast in https://github.com/jjoe64/jquery-mobile-toast.
But to me it looks difficult to add my custom html in the message box. So I have developed myself a new one which I think you will like.

So, lets see the code my example/api

MessageBox.js

var MESSAGE_TYPE = { "Information": 1, "Error": 2, "Confirmation": 3 };
 
MessageBox =
{
    close: function () {
        MessageBox.successEvent = function () { MessageBox.close() }
        MessageBox.cancelEvent = function () { MessageBox.close() }
        $(".popup_messagebox").remove();
        $(".cover_background").remove();
    },
 
    successEvent: function () { MessageBox.close(); },
 
    cancelEvent: function () { MessageBox.close(); },
 
    show: function (messageType, header, content, onSuccess, onCancel) {
        var popupStr = "<div align='center' class='popup_messagebox ui-simpledialog-container ui-overlay-shadow ui-corner-all pop ui-body-b in'>"
                    + getMessageContent(messageType, header, content) + "</div>";
        $("body").append(popupStr);
        $(".popup_messagebox").center();
        $(".popup_messagebox").trigger("create");
        $("body").append($('<div class="cover_background"></div>'));
 
        if (onSuccess != undefined || onSuccess != null) {
            this.successEvent = function () { onSuccess(); MessageBox.close(); }
        }
        else {
            this.successEvent = function () { MessageBox.close() }
        }
 
        if (onCancel != undefined || onCancel != null) {
            this.cancelEvent = function () { MessageBox.close(); onCancel(); }
        }
        else {
            this.cancelEvent = function () { MessageBox.close() }
        }
 
        $(".popup_messagebox #MsgOkButton").bind("click", this.successEvent);
        $(".popup_messagebox #CancelButton").bind("click", this.cancelEvent);
    }
}
 
function getMessageContent(messagType, header, content) {
    var messageContent = "";
    if (messagType == MESSAGE_TYPE.Information) {
        messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
        + '<div class="messagebox_content">' + content + '</div>'
        + '</div>';
    }
    else if (messagType == MESSAGE_TYPE.Confirmation) {
        messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
        + '<div class="messagebox_content">' + content + '</div>'
        + ''
        + '</div>';
    }
    else if (messagType == MESSAGE_TYPE.Error) {
        messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
        + '<div class="messagebox_caption">Please fix the red marked errors(s)</div>'
        + '<div class="messagebox_content">' + content + '</div>'
        + '</div>';
    }
 

Code to make the popup centered

jQuery.fn.center = function (absolute) {
    return this.each(function () {
        var t = jQuery(this);

        t.css({
            position: absolute ? 'absolute' : 'fixed',
            left: '50%',
            top: '50%',
            zIndex: '1000000'
        }).css({
            marginLeft: '-' + (t.outerWidth() / 2) + 'px',
            marginTop: '-' + (t.outerHeight() / 2) + 'px'
        });

        if (absolute) {
            t.css({
                marginTop: parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(),
                marginLeft: parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
            });
        }
    });
};

CSS

.messagebox_container
{
    width:100%;
    height:100%;
    overflow:auto;
    background-color:Black;
    text-shadow: 0 0 0 white;
    padding-bottom:10px;
    text-align:center;
}
 
.messagebox_header
{
    font-size:24px;   
    color:White;
    margin:10px 0px 10px 0px;
    padding:0px 0px 0px 15px;
    text-align:left;    
}
 
.messagebox_caption
{
    color:White;
    font-size:14px;
    text-align:left;
    margin:10px 0px 10px 15px;
}
 
.messagebox_content
{
    color:Red;
    min-height:10px;
    text-align:left;
    padding:0px 10px 10px 15px;    
}
 
.ui-simpledialog-container
{
    border:solid 2px white !important;
    border-radius:.3em !important;
    -webkit-border-radius:.3em !important;
    background-color:Black !important;        
    
}
.popup_messagebox
{
    position:fixed;
    background-color:Black !important;
    padding:0 !important;
    border:solid 2px white;
    border-radius: .3em !important;
    min-width:280px !important;
    vertical-align:middle; 
    z-index:100000000000;   
}
 
.cover_background
{
    position:fixed;
    top:0px;
    left:0px;
    width:10000px;
    height:10000px;
    opacity:0.5;
    z-index:10000;
    background-color:Black;    
}

Now you can use the message box in the following way

MessageBox.show(MESSAGE_TYPE.Confirmation, "Header", "Message Content",
    function () {
                MessageBox.show(MESSAGE_TYPE.Information, "Header", "Yes Callback is called.");            
        });
    }, null);

The Parameters description for the Message box/popup:
messageType:
MESSAGE_TYPE.Information for information message
MESSAGE_TYPE.Error for error message
MESSAGE_TYPE.Confirmation for confirmation message.

header: Message box header content
content: Message box main content
onSuccess: Callback method for success button click(ok/yes)
onCancel: Callback method for cancel button click (Cancel/No)

The code is simple and you can modify in your way very easily I believe. Of course you can also use this popup in any web page also with CSS3 and HTML5 support for better look.

Advertisements
Categories: JQuery, JQuery Mobile
  1. July 3, 2013 at 12:21 pm

    Hi
    I am trying to test this on my device.

    But you missed to provide below CSS and DOM details of below
    MsgOkButton
    MsgCancelButton

    Please provide to check this out.

    I really appreciate your efforts.

    Thanks

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: