Как показать всплывающее сообщение, например, в Stack Overflow

Question

Я бы хотел добавить всплывающее сообщение, подобное тому, которое появляется в Stack Overflow, когда я не вошел в систему, и я пытаюсь использовать кнопки голосования.

Каков наилучший способ достижения этого? Выполняется ли с помощью библиотеки jquery?

Answer 1

Я использую jqModal, просто в использовании, и вы можете достичь некоторых больших эффектов

Answer 2

Также проверку jQuery UI Dialog

Answer 3

Использования ModalPopup в управляющем AJAX инструментария является еще одним способом вы можете получить этот эффект.

Answer 4

EDIT: приведенный ниже код показывает, как воспроизводить бары, которые отображаются в верхней части экрана, когда вы получаете новый значок, сначала приходите на сайт и т. Д. Для диалоговых диалогов, которые вы получаете, когда пытаетесь комментировать слишком быстро, голосовать за свой вопрос и т. д., проверить this question, где я покажу, как это сделать или просто перейдите прямо к example.

---

Вот как Stackoverflow делает это:

Это разметки, изначально скрыты, поэтому мы можем постепенно исчезать в:

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

Здесь приведены стили применяются:

#message { 
    font-family:Arial,Helvetica,sans-serif; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

#message span { 
    text-align: center; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    float:right; 
    margin-right:10px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left:3px; 
    padding-right:3px 
} 

.close-notify a { 
    color: #fff; 
} 

И это javascript (с использованием jQuery):

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

И вуаля. В зависимости от настроек вашей страницы вы также можете редактировать отображаемый край тела.

Here is a demo of it in action.

Answer 5

Вот что я нашел от просмотра источника StackOverflow. Надеюсь, это поможет кому-то. Функция showNotification используется для всех этих всплывающих сообщений.

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)}; 
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)}; 

//master... 
showErrorPopup: function (e, h, f) { 
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>"); 
    var i = function() { 
     g.fadeOutAndRemove() 
    }; 
    $(e).append(g); 
    g.click(i).fadeIn("fast"); 
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30)) 
} 

CSS

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;} 
.error-notification a{color:inherit;text-decoration:underline;} 
.error-notification li{font-size:110%;padding-top:3px;} 
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;} 

Это круто, как они используют длину сообщения, чтобы установить замирания тайм-аут. Я не понял, что все сообщения (не затухающие стили) действительно исчезают через 30 секунд.

Answer 6

Проверить bootstrap. Есть несколько всплывающих эффектов, модалов, переходов, предупреждений, всего на основе javascript и css.