如何显示popup消息,如在stackoverflow
我想添加一个popup消息,如当我没有login,并尝试使用投票button时出现在计算器上。
什么是实现这一目标的最佳方法? 它使用jQuery库吗?
编辑 :下面的代码显示了如何复制显示在屏幕顶部的酒吧,当你得到一个新的徽章,首先来到网站等。对于hover的对话,当你尝试评论太快,投票对于你自己的问题,等等,看看这个问题 ,我展示了如何做到这一点,或只是直接到这个例子 。
以下是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; }); });
瞧。 根据您的页面设置,您可能还想要在显示屏上编辑正文页边距。
这是一个在行动中的演示。
还检出jQuery UI对话框
我使用jqModal ,易于使用,你可以实现一些很好的效果
在AJAX控件工具包中使用ModalPopup是另一种可以获得这种效果的方法。
这是从查看StackOverflow源中find的。 希望能为某人节省一些时间。 showNotification函数用于所有这些popup消息。
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秒之后实际上淡出。
检查引导 。 有一些popup式的效果,模式,转换,警报,一切都基于javascript
和css
。