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

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Oct 15, 2012

Thank you very much!

ghost commented Oct 15, 2012

Thank you very much!

@emad-elsaid

This comment has been minimized.

Show comment Hide comment
@emad-elsaid

emad-elsaid Dec 30, 2012

Yup, thanks that works like a charm.

Yup, thanks that works like a charm.

@zebarahman

This comment has been minimized.

Show comment Hide comment
@zebarahman

zebarahman Jan 28, 2013

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

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

@Mullazman

This comment has been minimized.

Show comment Hide comment
@Mullazman

Mullazman Mar 12, 2013

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

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

@brucelandgate

This comment has been minimized.

Show comment Hide comment
@brucelandgate

brucelandgate Mar 19, 2013

Nice.. works a treat. Thanks very much!

Nice.. works a treat. Thanks very much!

@dcimring

This comment has been minimized.

Show comment Hide comment
@dcimring

dcimring Apr 3, 2013

Very nice :) Thanks for sharing.

dcimring commented Apr 3, 2013

Very nice :) Thanks for sharing.

@subinsebastien

This comment has been minimized.

Show comment Hide comment
@subinsebastien

subinsebastien May 10, 2013

Nice piece of code. Thank you!

Nice piece of code. Thank you!

@uxDaniel

This comment has been minimized.

Show comment Hide comment
@uxDaniel

uxDaniel Jul 9, 2013

Thank you!

uxDaniel commented Jul 9, 2013

Thank you!

@obook

This comment has been minimized.

Show comment Hide comment
@obook

obook Jul 13, 2013

Cleaver, thank you.

obook commented Jul 13, 2013

Cleaver, thank you.

@WebSerGe

This comment has been minimized.

Show comment Hide comment
@WebSerGe

WebSerGe Sep 12, 2013

Thank you

Thank you

@pengwll

This comment has been minimized.

Show comment Hide comment
@pengwll

pengwll Sep 16, 2013

Nice, thank you!

pengwll commented Sep 16, 2013

Nice, thank you!

@ahmedali2

This comment has been minimized.

Show comment Hide comment
@ahmedali2

ahmedali2 Oct 30, 2013

Amazing!! thank you!!!!!!

Amazing!! thank you!!!!!!

@dakshas-iprogrammer

This comment has been minimized.

Show comment Hide comment
@dakshas-iprogrammer

dakshas-iprogrammer Dec 23, 2013

Thanks for sharing :)

Thanks for sharing :)

@fedyunin

This comment has been minimized.

Show comment Hide comment
@fedyunin

fedyunin Jan 23, 2014

Thanks!

Thanks!

@xiaobitao

This comment has been minimized.

Show comment Hide comment
@xiaobitao

xiaobitao Feb 11, 2014

good code.
Thank for sharing

good code.
Thank for sharing

@ParAnton

This comment has been minimized.

Show comment Hide comment
@ParAnton

ParAnton Mar 3, 2014

Works like a charm!

ParAnton commented Mar 3, 2014

Works like a charm!

@pepedeab

This comment has been minimized.

Show comment Hide comment
@pepedeab

pepedeab 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

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

This comment has been minimized.

Show comment Hide comment
@xzelin

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

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

This comment has been minimized.

Show comment Hide comment
@adnanpirota

adnanpirota May 21, 2014

Thank's a lot everyone

Thank's a lot everyone

@botweb

This comment has been minimized.

Show comment Hide comment
@botweb

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

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

This comment has been minimized.

Show comment Hide comment
@bryanmuvi

bryanmuvi Jun 13, 2014

good changes.
Thank for sharing

good changes.
Thank for sharing

@pradeeshmp

This comment has been minimized.

Show comment Hide comment
@pradeeshmp

pradeeshmp Jul 8, 2014

Awesome modification, thanks for the support

Awesome modification, thanks for the support

@cabolanoz

This comment has been minimized.

Show comment Hide comment
@cabolanoz

cabolanoz Aug 4, 2014

+1

+1

@xelpmocShubham

This comment has been minimized.

Show comment Hide comment
@xelpmocShubham

xelpmocShubham Sep 2, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@sriharigolla

sriharigolla Dec 3, 2014

nice work

nice work

@sriharigolla

This comment has been minimized.

Show comment Hide comment
@sriharigolla

sriharigolla Dec 3, 2014

botweb nice changes

botweb nice changes

@djwgit

This comment has been minimized.

Show comment Hide comment
@djwgit

djwgit Apr 30, 2016

great,thanks, using botweb's change.

djwgit commented Apr 30, 2016

great,thanks, using botweb's change.

@gitdealdo

This comment has been minimized.

Show comment Hide comment
@gitdealdo

gitdealdo Jan 9, 2017

Great, Thanks for shared.

Great, Thanks for shared.

@imspikey

This comment has been minimized.

Show comment Hide comment
@imspikey

imspikey Jan 29, 2017

Thank you nice work

Thank you nice work

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