html css notifier, который всплывает из нижней правой части страницы

Мне нужен уведомитель, который появляется с нижней правой стороны страницы. Я видел это на многих сайтах, включая facebook, как чат-сообщение от друзей. У меня есть поиск bootstrap, jquery и многое другое, но я не могу получить то, что ищу.html css notifier, который всплывает из нижней правой части страницы

У вас есть информация?

источник

2015-02-06 Anonymous

'alertify.js' работал очень хорошо для меня, демки доступны на своей странице GitHub: http://fabien-d.github.io/alertify.js/ – SaschaM78

@ SaschaM78, где я могу получить объяснение о том, как его использовать –

просто прокрутите страницу вниз, в основном это просто требует добавления файлов JS и CSS, и вы Назовите его как 'alertify.alert (« Сообщение идет здесь »);'. Однако я не пытался показать изображение внутри окна оповещения. – SaschaM78

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

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>

источник

2015-02-06 10:19:59 Klors

Я также хочу изображение и описание об изображении в нотации. как я могу это сделать? –

@fawadali Просто добавьте html в сообщение, я включил один в свой пример фрагмента – Klors

Вы можете использовать позиционирование, чтобы избежать добавления большего веса вашего проекта в форма дополнительной внешней библиотеки. Я использовал 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>

источник

2015-02-06 10:24:15 jbutler483

html css notifier, который всплывает из нижней правой части страницы

ответ

Смежные вопросы