Показывать оповещение для тостов в стиле Android с помощью HTML/CSS/JavaScript

Обычно, когда вы хотите, чтобы пользователь узнал о чем-то, вы используете предупреждение.

Теперь скажите, что я хотел бы сделать это, но в Android-тосте, как, например, всплывающее окно, которое появляется на экране, но затем через несколько секунд исчезает само по себе, поэтому пользователю не придется беспокоиться о его закрытии, например, изображение ниже.

Как это можно сделать в Интернете?
Примечание: Выполнение сенсорного интерфейса, чтобы причина, по которой я хотел бы иметь это таким образом

Ответ 1

Более простой способ - сделать держатель, на котором вы разместите свое сообщение. Этот держатель будет скрыт.

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

Затем с помощью простого script вы можете показать его на несколько секунд. При необходимости используйте .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>

Ответ 2

У вас есть несколько хороших библиотек в Интернете, чтобы имитировать собственное сообщение toost для Android:

Toastr
https://github.com/jadjoubran/Android-Toast (Javascript)
https://github.com/akquinet/jquery-toastmessage-plugin (jQuery)
https://gist.github.com/kamranzafar/3136584 (jQuery Mobile)

В основном это div с сообщением с некоторым CSS и анимацией для отображения и скрытия.

Ответ 3

Если вы хотите уведомление, как это. Тогда код и инструкция здесь (извините 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);
}

Ответ 4

Вот простое решение 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!"/>

Ответ 5

Я думаю, вы можете легко создать плагин jQuery, который делает это. Я постараюсь найти его. Если я не могу, я, вероятно, просто сделаю это, потому что это не кажется слишком сложным.

Не удалось найти простой, похожий на Android, поэтому я сделал его.

Вот он: jquery.dpToast

Стандартное сообщение создается таким образом.

$.fn.dpToast("Toast Message");

или

$().dpToast("Toast Message");

если вы хотите определить пользовательский тайм-аут, сделайте это как таковое (в милисекундах), по умолчанию 3 секунды:

$.fn.dpToast("Toast Message", 4000); // 4 second timeout

Надеюсь, что кто-то найдет это полезным.

Ответ 6

Вот Notify-js библиотека, которая много заимствует из Toastr и упрощает его до чего-то похожего на android-toast.

В нем отображается div с некоторыми сообщениями в нем.