Skip to content

Instantly share code, notes, and snippets.

@kamranzafar
Created July 18, 2012 14:40
Show Gist options
  • Star 38 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save kamranzafar/3136584 to your computer and use it in GitHub Desktop.
Save kamranzafar/3136584 to your computer and use it in GitHub Desktop.
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();
});
}
@shubham-gupta-nerdware
Copy link

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
Copy link

nice work

@sriharigolla
Copy link

botweb nice changes

@djwgit
Copy link

djwgit commented Apr 30, 2016

great,thanks, using botweb's change.

@gitdealdo
Copy link

Great, Thanks for shared.

@imspikey
Copy link

Thank you nice work

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