Skip to content
Create a gist now

Instantly share code, notes, and snippets.

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(){
$(this).remove();
});
}
@ghost
Unknown commented Oct 15, 2012

Thank you very much!

@blazeeboy

Yup, thanks that works like a charm.

@zebarahman

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

@Mullazman

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

@brucelandgate

Nice.. works a treat. Thanks very much!

@dcimring
dcimring commented Apr 3, 2013

Very nice :) Thanks for sharing.

@subinsebastien

Nice piece of code. Thank you!

@zlapper
zlapper commented Jul 9, 2013

Thank you!

@obook
obook commented Jul 13, 2013

Cleaver, thank you.

@WebSerGe

Thank you

@pengwll
pengwll commented Sep 16, 2013

Nice, thank you!

@ahmedali2

Amazing!! thank you!!!!!!

@dakshas-iprogrammer

Thanks for sharing :)

@fedyunin

Thanks!

@xiaobitao

good code.
Thank for sharing

@ParAnton
ParAnton commented Mar 3, 2014

Works like a charm!

@pepedeab
pepedeab commented Mar 5, 2014

I changed:

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

to:

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

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

@xzelin
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()});

@adnanpirota

Thank's a lot everyone

@botweb
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>');

    $toast.css({
        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(){
        $(this).remove();
    };

    $toast.click(removeToast);

    $toast.appendTo($.mobile.pageContainer).delay(2000);
    $toast.fadeOut(400, removeToast);
}
@bryanmuvi

good changes.
Thank for sharing

@pradeeshmp

Awesome modification, thanks for the support

@cabolanoz

+1

@xelpmocShubham

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

' + message + '

');
var removeToast = function(){
$(this).remove();
};
$toast.click(removeToast);
$toast.appendTo($('#mcontainer')).delay(3000);
$toast.fadeOut(1000, removeToast);
}

css:--
.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;}

@sriharigolla

nice work

@sriharigolla

botweb nice changes

@djwgit
djwgit commented Apr 30, 2016

great,thanks, using botweb's change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.