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 回答