Question

我很难让CSS工作，就像我想要闪存一样（当你登录时做的那些小消息，或做某事或什么来确认你的行动，例如在Rails中）。

我希望它：

住在任意div中
看起来像一个居中的框，里面有文字
只需要适合文本所需的大小（如果小于指定的最大宽度）或包装文本（如果更大）
具有居中或左对齐（或组合）文字，具体取决于闪光灯（例如，短错误是居中的;较长的操作方式新手入体是左对齐的）;一个额外的CSS类（例如'flash info left'）来支持这个就行了
在彼此相邻的页面上闪烁多次（如示例所示）
最好由文本周围的单个元素组成，而不是包装元素中元素内的文本
最好是YUI CSS兼容和纯CSS（不是JS）
适用于IE7 +，FFx 3 +，Safari 3+;在旧版浏览器上“足够好”

我见过的大多数CSS并没有做到这一点 - 例如大多数都指定一个固定的宽度，这意味着要么包裹得很差，要么填充太多。

我该怎么做？（或者：为什么我不能？）

这是我目前的CSS：

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.flash {
    text-align: center;
    padding:    .3em .4em;
    margin:     0 auto .5em;
    clear:      both;
    max-width:  46.923em; /* 610/13 */  
    *max-width: 45.750em; /* 610/13.3333 - for IE */
}

.flash.error {
    border: thin solid #8b0000;
    background: #ffc0cb;
}

.flash.notice, .flash.info {
    border: thin solid #ff0;
    background: #ffe;
}

.flash.warning {
    border: thin solid #b8860b;
    background: #ff0;
}

.flash .close {
    float:  right;
}

.flash .close a {
    color:              #f00;
    text-decoration:    none;
}

奖励积分：我通过下面的工具提示代码实现了我想要的部分内容;也就是说，它不能包装。

出于某种原因，除非指定nowrap或宽度，否则默认宽度非常小。我无法弄清楚为什么，或者如何让它以特定的，更宽的宽度包裹（就像我想要用闪光灯一样）。

Some text with <span class="tooltip">info <span>i can has info?</span></span> about a word

.tooltip {
  position: relative; /*this is the key*/
    background-color: #ffa;
}

.tooltip:hover{
    background-color: #ff6;
}

.tooltip span {
    display: none
}

.tooltip:hover span { /*the span will display just on :hover state*/
    z-index:        1; 
    display:        block;
    position:       absolute;
    top:            1.6em; 
    left:           0;
    border:         thin solid #ff0;
    background:     #ffe;
    padding:        .3em .6em;
    text-align:     left;
    white-space:    nowrap;
}

谢谢！

西

Answer 1

这些是有趣的Javascript通知尝试，第一个有集中通知，也许你可以从中获得灵感。

Growl like (mootools)

ROAR (this one is really good)

Answer 2

首先，在寻找这样的样式时，你应该将这些样式称为“Growls”。这就是Apple使用的名称，它会非常积极地使用它们，所以这就是你应该寻找的名称。

其次，Roar的样式表非常易于访问，为什么不下载和复制它。虽然弹出窗口是JS，但生成的脚本是纯HTML。

mootools，JQ，＆amp; Ext有自己的Growl通知项目。

第三，如果你只是想制作自己的，如果你有它将永远使用的尺寸，你可能最好制作一两个图形，只是在他们的中心排列文字。

Answer 3

这是一个很大的问题，但我会尝试将其分解。

首先，关于你的前三个要求，你可能会被卡住，除非你有奢侈的口述浏览器平台。为了在大多数浏览器中将框放在任意DIV中，您必须为内部块元素指定宽度。它必须是一个块元素，以便您可以使它看起来像一个盒子（着色，边框）。您可以在支持display: inline-block的浏览器上无距离地离开。如果你愿意，你可以尝试用一些脚本来解决这个问题，根据内部文本的长度来设置宽度，最多可以达到最大值。

您接下来的三个要求彼此不一致。如果你允许多次闪烁，一些是居中的，一些是左对齐的，那么理由就是要求每个闪存都在它自己的块元素内，以便你可以应用对齐样式。

这并不明显，但对notice，warning或error的示例Flash类型没有任何帮助。如果你想区分那些应该居中（短错误）和那些应该左对齐（新手介绍），用不同的键把它们放在闪存中。通过闪存迭代，应用必要的类名称以获得每个键所需的样式。如果必须支持多个错误消息，则flash[:error]可以是一个数组。我会编写辅助方法来帮助向flash添加消息，因此视图中的条件代码更少。

Answer 4

Alertify.js有一个很好的用户界面，易于使用，你也可以尝试。

http://fabien-d.github.com/alertify.js/

闪存的好CSS（也就是Rails中的信息消息，OSX中的咆哮）

4 个答案: