Mental Jetsam

By Peter Finch

Pop-up message in JQuery Mobile

Posted by pcfinch on May 10, 2011

The following code can be used to pop-up a message in JQuery Mobile similar to an Android “toast”.

$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Sorry, what was incorrect. Please try again.</h1></div>").css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
  .appendTo( $.mobile.pageContainer )
  .delay( 1500 )
  .fadeOut( 400, function(){
    $(this).remove();
  });

BTW… I Love JQuery Mobile!!!!

Advertisements

13 Responses to “Pop-up message in JQuery Mobile”

  1. AnnaPS said

    This is great, thank you for posting! Please try to get it submitted to core jqm 🙂

  2. 7ghost said

    Thanks works great!!!

  3. kds said

    Thank you very much for this. Great!!!

  4. Charu said

    Its really useful…Thank u..

  5. Chano said

    Good tip!

  6. David Webb said

    Exactly what I was looking for. Thanks!

  7. vinay said

    Can u please give me the example of it to understand the implementation of this? I am waiting for it please

    • pcfinch said

      The code in the post is an example shows how to implement this. If you want to make it more versatile then just make a function out of it and pass in the message (i.e. the text between the H1 tags) as a function parameter and that’s all you need.

  8. Anonymous said

    You are friggin’ ace man! much love! ❤ been looking for such a simple solution for a long time! bless you! 😀

  9. Panos said

    Very good

  10. Euri said

    Thank you so much!!!!!!!!!!!!!!!!!! :3

  11. manish said

    really awsome…

  12. Pasha said

    Sadly, cannot get it to work – neither with .appendTo( $.mobile.pageContainer ) nor .appendTo( $(‘body’)). Plain alert() works though.

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: