Question

我想从三个元素（顶部，中间，底部）构建CSS弹出窗口（或块）。我总是以简单的方式做到这一点但顶部/底部之上没有文字区域。现在我必须建立一个自定义背景，但不知道如何。弹出窗口（块）的高度应取决于内容。是否有可能没有任何JS黑客攻击？

popup background

Answer 1

将其切成嵌套的盒子等我试过的是先创建一个容器，箭头为div，然后是内容（带背景渐变）和内容包装（红色背景）和内容。< / p>

<强> 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;
}

我已将箭头浮动到左边，左边距为内容和填充包装。

它取决于较新浏览器支持的border-radius和box-shadow。如果您想支持旧浏览器，那么我建议您使用更多图像来获得视觉效果。

希望这会有所帮助。的 jsFiddle example

Answer 2

试试这个：

- 将布局分为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>

Answer 3

看看ColorBox它是如此简单易用，你可以自定义它的css来做任何你想做的事。

您还可以将弹出内容定义为来自其他页面的内容：

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

现在弹出窗口的宽度适合你的页面....

它是强大的工具尝试它。

Answer 4

我找到了简单的方法！

首先创建相关块，内部内容和三个绝对块。每种颜色都不会与其他颜色重叠！看一下这个例子：

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/

创建自定义弹出背景（动态高度 - 可调整大小）由三个元素组成（顶部，中间，底部）

4 个答案: