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

Very nice :) Thanks for sharing.

@subinsebastien

Nice piece of code. Thank you!

@zlapper

Thank you!

@obook

Cleaver, thank you.

@WebSerGe

Thank you

@pengwll

Nice, thank you!

@ahmedali2

Amazing!! thank you!!!!!!

@dakshas-iprogrammer

Thanks for sharing :)

@fedyunin

Thanks!

@xiaobitao

good code.
Thank for sharing

@ParAnton

Works like a charm!

@pepedeab

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

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

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

@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

great,thanks, using botweb's change.

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