Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JQuery Mobile Android-style Toast popup
var toast=function(msg){
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h3>"+msg+"</h3></div>")
.css({ display: "block",
opacity: 0.90,
position: "fixed",
padding: "7px",
"text-align": "center",
width: "270px",
left: ($(window).width() - 284)/2,
top: $(window).height()/2 })
.appendTo( $.mobile.pageContainer ).delay( 1500 )
.fadeOut( 400, function(){

ghost commented Oct 15, 2012

Thank you very much!

Yup, thanks that works like a charm.

Thanks, please can u tell me how to use this in an HTML file..?

Signed up just to say thanks, though it's about time I signed up.
Thank you dude!

Nice.. works a treat. Thanks very much!

dcimring commented Apr 3, 2013

Very nice :) Thanks for sharing.

Nice piece of code. Thank you!

uxDaniel commented Jul 9, 2013

Thank you!

obook commented Jul 13, 2013

Cleaver, thank you.

Thank you

pengwll commented Sep 16, 2013

Nice, thank you!

Amazing!! thank you!!!!!!

Thanks for sharing :)


good code.
Thank for sharing

ParAnton commented Mar 3, 2014

Works like a charm!

pepedeab commented Mar 5, 2014

I changed:

left: ($(window).width() - 284)/2,
top: $(window).height()/2 })


top: "50%",
left: "50%" })

I used top and left 50% to center the div propertly. Thanks for your code. Hope this helps someone

xzelin commented Mar 9, 2014

Thanks! And I have a little change too.

$("《div class='ui-loader ui-overlay-shadow ui-corner-all'》 《p style='word-break:break-all'》“+msg+"《/p》《/div》").css({
"display": "block", "opacity": 0.90, "text-align": "center", "width": "80%", "top": "50%", "left": "10%"
}).appendTo($.mobile.pageContainer).delay(1500).fadeOut(400, function(){$(this).remove()});

Thank's a lot everyone

botweb commented Jun 12, 2014

My changes:

function toast(message) {
    var $toast = $('<div class="ui-loader ui-overlay-shadow ui-body-e ui-corner-all"><h3>' + message + '</h3></div>');

        display: 'block', 
        background: '#fff',
        opacity: 0.90, 
        position: 'fixed',
        padding: '7px',
        'text-align': 'center',
        width: '270px',
        left: ($(window).width() - 284) / 2,
        top: $(window).height() / 2 - 20

    var removeToast = function(){


    $toast.fadeOut(400, removeToast);

good changes.
Thank for sharing

Awesome modification, thanks for the support


function toast(message,type) {
var $toast = $('

' + message + '

var removeToast = function(){
$toast.fadeOut(1000, removeToast);

.toastDiv{display: block;opacity: 0.9;position: fixed;text-align: center;width: 100%;top: 0;height: auto;padding: 0.5% 15%;box-sizing: border-box;line-height: 1.4em;color: #fff;font-size: 10pt;font-family: robotoL;}
.tDanger{background:#D06e6e; border:none;}
.tInfo{background: #378C99 ; border:none;}
.tSuccess{background:#9ab512 ; border:none;}

nice work

botweb nice changes

djwgit commented Apr 30, 2016

great,thanks, using botweb's change.

Great, Thanks for shared.

Thank you nice work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment