Val*_* S. 1 html javascript css popover twitter-bootstrap
HTML
<div class="pop-div">
<a href="#" data-toggle="popover" title="<strong>Notifiche</strong>" data-html="true" data-content="Notification 1<hr />Notification 2<hr />Notification 3 <hr />Notification 4">Notifications</a>
</div>
Run Code Online (Sandbox Code Playgroud)
JAVASCRIPT
$('[data-toggle="popover"]').popover({placement: 'bottom'});
//hide popover when click outside
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if ($(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
Run Code Online (Sandbox Code Playgroud)
CSS
.pop-div .popover-content {
height: 50px;
overflow-y: scroll;
Run Code Online (Sandbox Code Playgroud)
}
我在上面的代码中有这个popover.我正在尝试在弹出窗口内容的左侧显示滚动条,但此代码不起作用.任何帮助将不胜感激.谢谢!
这是因为你的CSS声明是错误的.您应该用逗号分隔选择器,
:
.pop-div, .popover-content {
Run Code Online (Sandbox Code Playgroud)
不
.pop-div .popover-content {
Run Code Online (Sandbox Code Playgroud)
在这种情况下.pop-div
是无关紧要的,你只需要
.popover-content {
height: 50px;
overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)
看小提琴 - > http://jsfiddle.net/tv5Vu/