Jquery 引导中模式上的图标

我对引导模式有问题。 我想在模态中显示图片（在HTML中是1,2,3…）。 在每一张图片上，我都覆盖了背景和图标（glyphicon）。 问题是，若我的模式是打开的，下面的图片也是一个图标。我不知道问题出在哪里。我尝试了很多东西，但我仍然不知道哪里出了问题

HTML:

下面是两张照片，它看起来是什么样子：

第二张图片（这里我们可以看到冗余图标）：

---

请提供帮助。

引导模式发出一些事件，可用于在打开时隐藏加号图标（请参阅）：

$（'.img_缩略图，.after'）。单击（函数（）{
$（'.modal body'）.empty（）；
var title=$（this.parent（'a'）.attr（“title”）；
$（'.modal title'）.html（title）；
$（$（this.parents（'div'）.html（））.appendTo（'.modal body'）；
$（“#myModal”）.modal({
秀：真的
});
});
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'.after'，this.hide（）；
});
。之后{
位置：相对位置；
左：30px；
顶部：-80px；
z指数：99；
字体大小：40px；
颜色：红色；
}

×
标题
接近

<div id="content">
        <div class="container">
            <div class="row margin-row">
                <div class="col-xs-6 col-sm-3 image_container"><a title="1" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_1.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="2" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_2.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="3" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_3.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div> 
                <div class="col-xs-6 col-sm-3 image_container"><a title="4" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_4.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="5" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_1.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="6" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_2.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="7" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_3.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
                <div class="col-xs-6 col-sm-3 image_container"><a title="8" href="#content"><img class="img_thumbnail img-responsive" src="images/pic_4.jpg"><div class="after"><i class="glyphicon glyphicon-plus"></i></div></a></div>
            </div>
        </div>
    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal">×</button>
                    <h3 class="modal-title">Heading</h3>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>      

    $('.img_thumbnail, .after').click(function(){
     $('.modal-body').empty();
     var title = $(this).parent('a').attr("title");
     $('.modal-title').html(title);
     $($(this).parents('div').html()).appendTo('.modal-body');
     $('#myModal').modal({show:true});
});

$('#myModal').on('show.bs.modal', function() {
  $('.after', this).hide();
});