2

3つの要素（上、中、下）から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;
}
​

矢印を左、コンテンツの左マージン、ラッパーのパディングにフロートしました。

これは、新しいブラウザでサポートされているborder-radiusとbox-shadowに依存します。古いブラウザをサポートしたい場合は、視覚効果のためにより多くの画像を使用することをお勧めします。

お役に立てれば。jsFiddleの例

于 2012-06-12T16:10:15.677 に答える
0

これを試して：

-レイアウトを3つの分割に分割します。高さが固定された上/下と背景としての上部/下部の画像。真ん中の画像を使用して背景を繰り返します。何かのようなもの：

<!--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 に答える
0

ColorBoxを見てください。使い方はとても簡単で、cssをカスタマイズして好きなことをすることができます。

ポップアップコンテンツを次のような別のページのコンテンツとして定義することもできます。

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

これで、ポップアップの幅はページのサイズに合わせて調整されます。

強力なツールです。試してみてください。

于 2012-06-12T16:31:20.777 に答える
0

私はそれを行う簡単な方法を見つけました！

まず、関連するブロック、コンテンツ内、および3つの絶対ブロックを作成します。それぞれの色が重ならないように！例を見てください：

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 に答える