如何显示弹出式消息，如在堆栈溢出

我想添加一个弹出消息，像一个出现在堆栈溢出时，我没有登录，我尝试使用投票按钮。

实现这一目标的最佳方法是什么？ 是否使用 jquery 库完成？

27370 次浏览
小开

I use jqModal, easy to use and you can achieve some great effects

小开

Also checkout jQuery UI Dialog

小开

Using the ModalPopup in the AJAX control toolkit is another way you can get this effect.

小开

EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.

Here's how Stackoverflow does it:

This is the markup, initially hidden so we can fade it in:

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

Here are the styles applied:

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

And this is javascript (using jQuery):

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

And voila. Depending on your page setup you might also want to edit the body margin-top on display.

Here is a demo of it in action.

小开

Here's what I found from viewing the StackOverflow source. Hopefully saves some time for someone. The showNotification function is used for all those popup messages. 

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

It's cool how they use the length of the message to set the fading timeout. I didn't realize all the (non-fading style) messages actually fade out after 30 seconds.

小开

Check bootstrap. There are some pop-up effects, modals, transitions, alerts, everything based on javascript and css.


提交答案