复制 Stack Overflow 的弹出消息
要复制未登录或尝试投票时在 Stack Overflow 上看到的弹出消息,请考虑此操作方法:
标记:
<div id='message' style="display: none;"> <span>Hey, This is my Message.</span> <a href="#" class="close-notify">X</a> </div>
CSS:
#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:
$(document).ready(function() { $("#message").fadeIn("slow"); $("#message a.close-notify").click(function() { $("#message").fadeOut("slow"); return false; }); });
此代码在页面顶部显示一条带有可自定义消息的浮动消息。还包括用于关闭的关闭按钮。请注意,所应用的特定 CSS 和 JavaScript 可能会有所不同,具体取决于您使用此解决方案的上下文。
以上是如何在您的网站中复制 Stack Overflow 的浮动弹出消息?的详细内容。更多信息请关注PHP中文网其他相关文章!