通常，当您想让用户知道某些事情时，您会使用警报。
现在说我想这样做，但是以 Android toast 类似的方式，即出现在屏幕上但几秒钟后自行消失的弹出窗口所以用户不必费心关闭它，如下图所示。
如何在网络上实现这样的目标？
注意：做一个触摸界面，这就是我想以这种方式拥有它的原因
【问题讨论】：
标签： javascript jquery html css
更简单的方法是在您放置信息的地方制作一个支架。该持有人将被隐藏。
<div class='error' style='display:none'>Event Created</div>
你添加了一些 CSS 魔法
.error {
width:200px;
height:20px;
height:auto;
position:absolute;
left:50%;
margin-left:-100px;
bottom:10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding:10px;
text-align:center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
然后，您可以使用一个简单的脚本将其显示几秒钟。必要时使用.stop()
$('.error').fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
$('button').click(function () {
$('.error').text($(this).data('text')).fadeIn(400).delay(3000).fadeOut(400);
});body, html {
height:100%;
width:100%;
min-height:100%;
padding:0;
margin:0;
}
.error {
width:200px;
height:20px;
height:auto;
position:absolute;
left:50%;
margin-left:-100px;
bottom:10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding:10px;
text-align:center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='error' style='display:none'></div>
<button data-text='I did something!'>Do something!</button>这是一个非常基本的示例，然后可以将其更改为带有参数的函数，该函数将提供文本、颜色、持续时间和您可能需要的任何其他内容。
下面是一种更高级（不必要的复杂）的方式（有点像插件）。 Here 也是小提琴版。
(function($) {
$.fn.aToast = function(options) {
var $this = $(this),
settings = $.extend({
fadeOut: 400,
fadeIn: 400,
delay: 3000,
text: 'Whoops! Something happened and I showed up.',
toastListenEvent: 'click',
aClass: false
}, options),
$at = false,
aTevents = false;
settings.toastListenEvent = settings.toastListenEvent + ' a-Toast';
settings.aClass = 'aToast-view-message'
+ (settings.aClass ? ' ' + settings.aClass : '')
if ($('[data-aToast=true]:not(.aToast-init)').length)
$this = $this.add($('[data-aToast=true]:not(.aToast-init)')
.addClass('aToast-init'));
function _remove() {
$(this).stop().remove();
}
function _displayDiv() {
$('.aToast-view-message').hide();
var da = $(this).data('atoast-text');
var $div = $('<div/>', {
text: da ? da : settings.text,
class: settings.aClass
}).stop().fadeIn(settings.fadeIn)
.delay(settings.delay)
.fadeOut(settings.fadeOut, _remove)
.appendTo('body');
}
$this.not('[data-aToast=false]').on(settings.toastListenEvent, _displayDiv);
};
}(jQuery));
$('button').aToast({
aClass: 'users-dont-care-about-this-class-name'
});
$('div').aToast({
aClass: 'hehe',
toastListenEvent: 'mouseenter',
text: 'Okay, this is not working'
});
/* or
$().aToast({
aClass: 'users-dont-care-about-this-class-name'
});
To listen to data-aToast only
*/body,
html {
height: 100%;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
.aToast-view-message {
width: 200px;
height: 20px;
height: auto;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding: 10px;
text-align: center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Here goes nothing</button>
<input type='button' data-aToast='true' data-aToast-text='Hey there.' value='Woop!' />
<div style='display:inline-block'>I am a div! Hover me</div>【讨论】：
您在互联网上有一些很好的库来模仿原生 android toast 消息：
基本上是一个div，带有带有一些CSS的消息和一个显示和隐藏的动画。
【讨论】：
如果你想要这样的通知。然后代码和指令在这里（对不起koding.com :)））
HTML 端（添加正文结尾）
<div id="notification" class="kdnotification main">
<div class="kdnotification-title"></div>
</div>
CSS 方面
.kdnotification{display:none}
.kdnotification a{text-shadow:0 1px 0 #444}
.kdnotification{position:fixed;padding:10px;z-index:20001;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.kdnotification .kdnotification-title{color:#fff;font-size:24px;line-height:36px;margin:2px;font-weight:700}
.kdnotification .kdnotification-content{font-size:16px;line-height:18px;color:#fff}
.kdnotification .kdnotification-timer{position:absolute;top:21px;right:25px;color:#fff;line-height:15px;text-align:center;font-size:15px;width:20px;height:24px}
.kdnotification a{position:absolute;cursor:pointer;display:block;top:24px;right:5px;line-height:24px;text-align:center;font-size:24px;text-decoration:none;color:#fff;width:20px;height:24px}
.kdnotification-title{font-size:18px;line-height:28px;float:none}
.kdnotification-title{font-size:12px;line-height:16px;font-weight:400;float:none}
.kdnotification.mini{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;padding:1px;-webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000;-moz-box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000;box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000}
.kdnotification-title{font-size:12px;line-height:16px;font-weight:400;float:none;padding:2px 10px}
.kdnotification.mini .kdnotification-title p{padding:0 10px}
.kdnotification.mini.error{background:rgba(185,74,72,.9);font-weight:600}
.kdnotification.mini.success{background:rgba(70,136,71,.8);font-weight:600}
JS端（当然用jquery库）
function notify(message,status){
$('.kdnotification-title').html(message);
funcking();
if(status == 1){
$('#notification').css({'background-color':'rgba(0,0,0,.4)'}).fadeIn('slow').delay(5000).fadeOut('slow');
} else {
$('#notification').css({'background-color':'rgba(216,0,12,.6)'}).fadeIn('slow').delay(3000).fadeOut('slow');
}
}
function funcking(){
var kd=$('.kdnotification');
var viewportHeight = $(window).height(),
viewportWidth = $(window).width(),
kdheight = kd.height(),kdwidth = kd.width(),
hdiff = viewportHeight - kdheight,
vdiff = viewportWidth - kdwidth,
left= vdiff/2,
top = hdiff/2;
kd.css({'top':top+'px','left':left+'px'});
}
用例
if(success){
notify("Success message",1);
} else {
notify("Error message",0);
}
【讨论】：
这是一个简单的 CSS 和 Javascript 解决方案。 （使用 Jquery，但不需要）。
$("#clickme").click(function() {
$("body").append("<span class ='toast'>Hello World!</span>");
setTimeout(function(){
$(".toast").remove();
},3000);
}); .toast {
position: fixed;
display:block;
bottom: 2em;
height: 2em;
width: 10em;
left: calc(50% - 5em);
animation: toast-fade-in 1s 2 alternate;
background-color: black;
border-radius: 2em;
color: white;
text-align: center;
padding: 1em;
line-height: 2em;
opacity: 0;
}
@keyframes toast-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "clickme" type = "button" value = "click me!"/> 【讨论】：
我建议你使用这个轻量级的 ToastMaker 库，它与 android toast 的外观和感觉完全匹配，它的大小只有 1KB。
$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
<button id="mybutton">Show Toast</button>【讨论】：