public
Last active

JQuery Mobile Android-style Toast popup

  • Download Gist
toast.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
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();
});
}

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!

Cleaver, thank you.

Nice, thank you!

Amazing!! thank you!!!!!!

good code.
Thank for sharing

Works like a charm!

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

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.