从页面右下方弹出的html css通知程序

Question

我需要一个从页面右下方弹出的通知程序.我在很多网站上都看过这个,包括facebook,来自Friends的聊天消息.我有搜索bootstrap,jquery和许多其他东西,但无法得到我想要的东西.

你有任何信息吗？

Answer 1

您需要的内容称为Toast Notifications,Toaster Popups或类似术语.

Toastr就是其中之一http://codeseven.github.io/toastr/

这是http://codeseven.github.io/toastr/demo.html的演示页面

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

toastr.info("This is a message <img src=\"http://news.bbcimg.co.uk/media/images/71977000/jpg/_71977649_71825880.jpg\" />", "Toaster Popup");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<div id="toast"></div>

Answer 2

您可以使用定位以避免以额外的外部库的形式为您的项目增加更多的权重。我使用过 jquery（是的，一个库），尽管普通的 JS 也足以“切换类”。

这也允许更轻松地自定义通知。

我为此做了一个简单粗略的例子：

$('.pop').click(function() {
  $('.popup').toggleClass("open");
});

$('.band').click(function() {
  $('.popup').toggleClass("open");
});

.popup {
  height: 150px;
  width: 250px;
  background: gray;
  bottom: -170px;
  right: 0;
  position: absolute;
  transition: all 0.8s;
  padding-top: 20px;
  border-radius: 10px;
  vertical-align:top;
}
.open {
  bottom: 0;
}
body {
  overflow: hidden;
}
.band {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  text-align: right;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.8s;
}
.popup:hover {
  box-shadow: inset 0 0 15px black;
}
.band:hover {
  background: white;
}
html,
body {
  background: rgba(0, 0, 0, 0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="pop">toggle popup</button>
<div class="popup">
  <div class="band">close/dismiss</div>
  <img src="http://placekitten.com/g/200/300" height="60" width="40"/>
  Someone say popup?
 </div>