Skip to content

@kamranzafar /toast.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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();
});
}
@fzx

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

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.