Question

我目前正致力于设计一个允许用户对页面方面进行评论的引导弹出框。评论将被保存并发布到popover的上半部分。此弹出窗口有两个部分 - 标题中的注释和注释部分。顶部的评论必须在底部淡出。这应该是什么样的：

http://i.imgur.com/QRaCd7g.png

这是我目前的样式：
http://i.imgur.com/M4DAnEX.png

这是我目前的标记（硬编码评论）

<div>
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
        . 
        .
        .      
        .
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

知道怎么做到这一点？试图渐变背景，但我需要一些东西覆盖文本。不确定，让我知道你的想法！

Answer 1

我不得不稍微修改你的HTML结构（并提供有效的CSS），但这是我的尝试：

<强> HTML：

<div>
    <div class="popover-scroller">
        <div class="popover-title comment-popover-title">
            <div class="popover-title-header">
                ANDREW BARNETT
            </div>
            <div class="popover-title-content">
                Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
            </div>
        </div>
    </div>
    <div class="popover-fade"></div>
    <div class="popover-newcomment">            
        <div class="popover-content comment-popover-content">
            <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

<强> CSS：

* {
    background: #202020;  
    color: #ffffff;
}

.popover-scroller {
    overflow-y: scroll;
    width: 10em;
    height: 5em;
}

.popover-fade {
    position:relative;
    height: 1em;
    bottom: 1em; /* same as the height */
    background: linear-gradient(rgba(32,32,32,0), rgba(32,32,32,255));
    width: 10em; /* same as the scroller width */
}

最大的缺点是阴影覆盖在底部的滚动条，但希望这会让你走上正确的轨道。

Answer 2

您可以尝试上面从jdwallace12发布的链接中使用的方法。

例如：

HTML

<div class="wrapper">
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>
          <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>  <div id="bottom_fade"></div>
          <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

<强> CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: "Lucida Grande", Georgia, sans-serif;
    font-size: 67.5%;
}

p {
    font-size: 1.1em;
    line-height: 1.6em;
}

#page_wrap {
    width: 600px;
    z-index: 1;
    margin: 10px auto;
    background:#242424;
}

#bottom_fade {
    width: 600px;
    height: 50px;
    z-index: 99;
    position: absolute;
    top: 200px;
    left:0;   
    opacity:0.7;    
    background: url("http://s27.postimg.org/gpnlj01w3/bottom_fade.png") bottom center no-repeat;
}

.wrapper{width:400px; }
.popover-title-content{margin:10px 0 20px 0;}
.popover-textarea{ width:350px; height:200px;}
button{margin-top:20px;}

您可以在下面的jsfiddle链接中查看它。

此处输出：http://jsfiddle.net/7NLzX/

在Bootstrap popover中淡出文本

2 个答案: