javascript - 评级栏弹出窗口？(就像亚马逊的那个)

Question

https://cloud.githubusercontent.com/assets/8532166/23761874/55406dc2-051a-11e7-92b8-18921f8aa365.png

我想创建一个类似于 Amazon 的评级栏弹出窗口，如上面的 URL 所示。我尝试使用 bootstrap popover 创建它，但由于某种原因它不起作用。我需要一些帮助。

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true,
        template: '<div class="popover"><div class="arrow"></div><div class="popover-content"><div style="width:220px"><div class="small-space text-center"><span>4.1 out of 5 stars</span></div><table class="small-space"id="histogramTable"><tr><td class="rating-number"><span><a title="55% of reviews have 5 stars">5 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="55% of reviews have 5 stars"><div class="histo-meter"aria-label="55%"><div class="histo-meter-filled"style="width:55%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">55%</span><tr><td class="rating-number"><span><a title="21% of reviews have 4 stars">4 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="21% of reviews have 4 stars"><div class="histo-meter"aria-label="21%"><div class="histo-meter-filled"style="width:21%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">21%</span><tr><td class="rating-number"><span><a title="10% of reviews have 3 stars">3 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="10% of reviews have 3 stars"><div class="histo-meter"aria-label="10%"><div class="histo-meter-filled"style="width:10%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">10%</span><tr><td class="rating-number"><span><a title="8% of reviews have 2 stars">2 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="8% of reviews have 2 stars"><div class="histo-meter"aria-label="8%"><div class="histo-meter-filled"style="width:8%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">8%</span><tr><td class="rating-number"><span><a title="6% of reviews have 1 stars">1 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="6% of reviews have 1 stars"><div class="histo-meter"aria-label="6%"><div class="histo-meter-filled"style="width:6%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">6%</span></table></div></div></div>'
    });
    
    // Custom jQuery to hide popover on click of the close button
    $(document).on("click", ".popover-footer .btn" , function(){
        $(this).parents(".popover").popover('hide');
    });
});

.small-space{
  margin-bottom: 10px;
}

.rating-number{
  padding: 1px 3px;
}

.letter-space{
    display: inline-block;
    width: .385em;
}

.histoBar{
  width: 60%;
}

.histo-meter{
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
    overflow: hidden;
    background: #f2f2f2;
    background: -webkit-linear-gradient(top,#eee,#f6f6f6);
    background: linear-gradient(to bottom,#eee,#f6f6f6);
    background-color: #f3f3f3;
    height: 17px
}

.histo-meter-filled{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05);
    border-radius: 1px;
    background: #ffba00;
    background: -webkit-linear-gradient(top,#ffce00,#ffa700);
    background: linear-gradient(to bottom,#ffce00,#ffa700);
    background-color: #ffce00;
    transition: width .5s ease;
    float: left;
    font-size: 0;
    height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="popover">Customized Popover</button>
</div>

Answer 1

我找到了解决我自己问题的方法。问题是我将自定义弹出框内容添加到 template 选项，而不是它应该添加到引导弹出框的 content 选项。

$(document).ready(function(){
    $("#myPopover").popover({
        content : '<div style="width:220px"><div class="small-space text-center"><span>4.1 out of 5 stars</span></div><table class="small-space"id="histogramTable"><tr><td class="rating-number"><span><a title="55% of reviews have 5 stars">5 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="55% of reviews have 5 stars"><div class="histo-meter"aria-label="55%"><div class="histo-meter-filled"style="width:55%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">55%</span><tr><td class="rating-number"><span><a title="21% of reviews have 4 stars">4 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="21% of reviews have 4 stars"><div class="histo-meter"aria-label="21%"><div class="histo-meter-filled"style="width:21%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">21%</span><tr><td class="rating-number"><span><a title="10% of reviews have 3 stars">3 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="10% of reviews have 3 stars"><div class="histo-meter"aria-label="10%"><div class="histo-meter-filled"style="width:10%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">10%</span><tr><td class="rating-number"><span><a title="8% of reviews have 2 stars">2 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="8% of reviews have 2 stars"><div class="histo-meter"aria-label="8%"><div class="histo-meter-filled"style="width:8%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">8%</span><tr><td class="rating-number"><span><a title="6% of reviews have 1 stars">1 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="6% of reviews have 1 stars"><div class="histo-meter"aria-label="6%"><div class="histo-meter-filled"style="width:6%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">6%</span></table></div>',
        html: true
    }); 
});

.small-space{
  margin-bottom: 10px;
}

.rating-number{
  padding: 1px 3px;
}

.letter-space{
    display: inline-block;
    width: .385em;
}

.histoBar{
  width: 60%;
}

.histo-meter{
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
    overflow: hidden;
    background: #f2f2f2;
    background: -webkit-linear-gradient(top,#eee,#f6f6f6);
    background: linear-gradient(to bottom,#eee,#f6f6f6);
    background-color: #f3f3f3;
    height: 17px
}

.histo-meter-filled{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05);
    border-radius: 1px;
    background: #ffba00;
    background: -webkit-linear-gradient(top,#ffce00,#ffa700);
    background: linear-gradient(to bottom,#ffce00,#ffa700);
    background-color: #ffce00;
    transition: width .5s ease;
    float: left;
    font-size: 0;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Placing HTML inside Bootstrap 3 Popovers</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">

</script>
<style type="text/css">
	
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" id="myPopover" data-toggle="popover">HTML Inside Popover</button>    
</div>
</body>
</html>