Created
July 18, 2012 14:40
-
-
Save kamranzafar/3136584 to your computer and use it in GitHub Desktop.
JQuery Mobile Android-style Toast popup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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's a lot everyone
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);
}
good changes.
Thank for sharing
Awesome modification, thanks for the support
+1
function toast(message,type) {
var
' + 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;}
nice work
botweb nice changes
great,thanks, using botweb's change.
Great, Thanks for shared.
Thank you nice work
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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({$.mobile.pageContainer).delay(1500).fadeOut(400, function(){$ (this).remove()});
"display": "block", "opacity": 0.90, "text-align": "center", "width": "80%", "top": "50%", "left": "10%"
}).appendTo(