0

こんにちは私はリンクをクリックして公開したくないDivを持っています。ページの下部にポップアップが表示されます...現時点では次のようになっています：http： //jsfiddle.net/XPJC5/

body{margin:0;}
#lightbox {
        display:none;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        height:50px;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;">

             Business</div>
    <div style=" background-color:#333; width:100%; height:65px;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

しかし、私はこれのようにボックスを下から上にスライドさせたいです：http: //jsfiddle.net/R8zca/4/

誰かが達成を助けることができますか？裁判に失敗したようです。

ありがとう

4

1 に答える 1

1

HTMLのインラインスタイルから高さを削除し、cssでボックスを初期の高さ0pxに設定してから、cssトランジションを使用して完全な高さにします

html

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; ">

             Business</div>
    <div style=" background-color:#333; width:100%;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

css

body{margin:0;}
#lightbox div
{
    height: 0px;
}
#lightbox {
        display:block;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

#lightbox:target div
{
    height: 65px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

http://jsfiddle.net/axrwkr/XPJC5/2

于 2013-03-11T12:49:40.817 に答える