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(){

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!


Very nice :) Thanks for sharing.


Nice piece of code. Thank you!


Thank you!


Cleaver, thank you.


Thank you


Nice, thank you!


Amazing!! thank you!!!!!!


Thanks for sharing :)




good code.
Thank for sharing


Works like a charm!


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


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


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

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.