13

我很难让 CSS 像我希望的那样工作（当你登录或做某事时显示的那些小消息或确认你的操作，例如在 Rails 中）。

我希望它：

  • 居住在任意 div 中
  • 看起来像一个居中的盒子，里面有文字
  • 仅与适合文本（如果小于指定的最大宽度）或环绕文本（如果更大）所需的一样大
  • 具有居中或左对齐（或组合）文本，具体取决于 Flash（例如，短错误居中；较长的新手入门介绍是左对齐）；一个额外的 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;
}

谢谢！

  • 赛
4

4 回答 4

4

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

像咆哮一样（mootools）

ROAR（这个真不错）

于 2009-05-28T07:14:00.973 回答
2

首先，在寻找此类样式时，您应该将这些弹出窗口称为“咆哮”。这就是 Apple 使用的名称，而且它非常积极地使用它们，所以这就是您应该寻找的名称。

其次，Roar 的样式表很容易上手，你为什么不下载并复制它。虽然弹出窗口在 JS 中，但生成的脚本是纯 html。

mootools、JQ 和 Ext 有自己的 Growl 通知项目。

第三，如果你只是想自己做，如果你有它一直使用的尺寸，你可能最好制作一两个图形，然后在它们的中心对齐文本。

于 2009-06-02T06:32:29.857 回答
1

这是一个很大的问题，但我会尝试打破它。

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

您接下来的三个要求相互矛盾。如果您允许多个闪光灯，一些居中和一些左对齐，则仅对齐要求每个闪光灯都在其自己的块元素内，以便您可以应用对齐样式。

这并不明显，但对于notice,warning或error. 如果你想区分那些应该居中（短错误）和那些应该左对齐（新手介绍），用不同的键将它们放在闪存中。遍历您的闪存，应用必要的类名以获得每个键的所需样式。如果你必须支持多个错误信息，那么flash[:error]可以是一个数组。我会编写辅助方法以方便将消息添加到闪存中，因此视图中的条件代码更少。

于 2009-06-01T15:52:30.650 回答
1

Alertify.js 有一个漂亮的 UI 并且易于使用，你也可以尝试一下。

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

于 2013-04-01T12:57:52.847 回答