2

我想从三个元素（顶部、中间、底部）构建 CSS 弹出窗口（或块）。我一直以简单的方式进行操作，但顶部/底部上方没有文本区域。现在我必须建立一个自定义背景，但不知道如何。弹出（块）的高度应该取决于内容。没有任何 JS 黑客可以做到吗？

弹出背景

4

4 回答 4

1

将其切成嵌套框等
。我尝试的是首先创建一个容器，div箭头的 a ，然后是内容（带有背景渐变）和内容的包装器（带有红色背景）和里面的内容.

HTML

<div class="popup">
    <div class="arrow"></div>
    <div class="content">
        <div class="wrapper">
            <div class="top">Content top</div>
            <div class="red-area">Your main content</div>
            <div class="bottom">Bottom</div>
        </div>
    </div>
</div>​

现在你有了一个很好的 html 基础，你可以使用它来处理浮动、填充、边距、背景颜色和圆角，如下所示：

CSS

* { margin: 0; padding: 0 }
body { background: #eee; padding: 50px; }


/* .popup { width: 250px; } */ /* If you wanto to manually set a width for the whole popup */

.arrow {
    float: left;
    width: 25px;
    height: 50px;
    margin-top: 10px;
    background: white; /* your arrow image here */
    position: relative;
}

.content {
    margin-left: 25px;
    background: white;
    background: white url("your/gradient-image.jpg") repeat-x center bottom;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
}

.wrapper {
    padding: 15px;
    background: #ff7f7f;
}
​

我将箭头向左浮动，内容的左边距和包装器的填充。

它取决于较新的浏览器支持的边界半径和框阴影。如果您喜欢支持较旧的浏览器，那么我建议您使用更多图像来获得视觉效果。

希望这可以帮助。jsFiddle 示例

于 2012-06-12T16:10:15.677 回答
0

看看ColorBox，它很容易使用，你可以自定义它的 css 来做任何你想做的事情。

您还可以将弹出内容定义为来自另一个页面的内容，如下所示：

$.colorbox({href:"simplepage.html"});

现在弹出窗口的宽度将适合您页面的任何内容......

这是一个强大的工具，试试吧。

于 2012-06-12T16:31:20.777 回答
0

我找到了简单的方法来做到这一点！

首先创建相关块、内部内容和三个绝对块。每种颜色都不重叠！看例子：

HTML：

<div class="popup-container">
    <div class="content">
        test 1<br />
         test 2<br />
         test 3<br />
         test 4<br />
         test 5<br />
         test 6<br />
    </div>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

CSS：

.popup-container {
    position: relative;
}

.content {
    z-index: 9999;
}

.top {
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: red;
    top: 0;
    z-index: -1;
    opacity: 0.5;
}

.middle {
    position: absolute;
    width: 100%;
    background-color: yellow;
    bottom: 40px;
    top: 20px; /* height of top */
    z-index: -1;
    opacity: 0.5;
}

.bottom {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: blue;
    bottom: 0;
    z-index: -1;
    opacity: 0.5;
}

http://jsfiddle.net/bhnuh/5/

于 2012-06-14T15:43:00.507 回答
0

尝试这个：

- 将布局分为3个div：顶部/底部，高度固定，顶部/底部图像作为背景；和中间，使用中间图像并重复背景。就像是：

<!--Container-->
<div class="popup-container">

  <!--Top part-->
  <div class="top" style="height: 20px; background-image: url(top.jpg);"></div>

  <!--Now the middle div with the background repeating only vertically-->
  <div class="middle" style="height: auto; background-image: url(middle.jpg);
   background-repeat: repeat-y;"></div>

  <!--Bottom part-->
  <div class="bottom" style="height: 20px; background-image: url(bottom.jpg);"></div>

</div>
于 2012-06-12T15:16:59.363 回答