twitter-bootstrap 从页面右下角弹出的 html css 通知程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28363302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html css notifier that pops up from bottom right side of the page
提问by jbutler483
I need a notifier that pops up from bottom right side of the page. I have seen this on many sites including facebook as chat message from Friends. I have search bootstrap, jquery and many other things but could not get what I am looking for.
我需要一个从页面右下角弹出的通知程序。我在很多网站上都看到过这个，包括 Facebook 的朋友们的聊天消息。我有搜索引导程序、jquery 和许多其他东西，但找不到我要找的东西。
Any info you have?
你有什么资料吗？
回答by Klors
What you require are known as Toast Notifications, or Toaster Popups, or a similar term.
您需要的是 Toast 通知、Toaster 弹出窗口或类似术语。
Toastr is one such http://codeseven.github.io/toastr/
Toastr 就是这样一个http://codeseven.github.io/toastr/
Here is a demo page for it http://codeseven.github.io/toastr/demo.html
这是它的演示页面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>回答by jbutler483
You could use positioning in order to avoid adding more weight to your project in the form of extra external library's. I've used jquery (yes, a library) although plain vanilla JS would also be sufficient to 'toggling the class'.
您可以使用定位以避免以额外的外部库的形式为您的项目增加更多的权重。我使用过 jquery（是的，一个库），尽管普通的 JS 也足以“切换类”。
This allows for a much easier customisation of the notification as well.
这也允许更轻松地自定义通知。
I've made a simple, roughexample of this:
我为此做了一个简单粗略的例子：
$('.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>