本文介绍了如何在引导卡上添加关闭按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个使用以下代码的引导卡:
I have a bootstrap card using the following code:
<div class="card card-outline-danger text-center">
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
我正在使用以下代码使关闭按钮起作用:
I am using the following code to get my close button working:
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>
关闭按钮不起作用,我是新手。因此,我需要一些帮助。
The close button is not working and I am new to bootstrap. Therefore, I need some help.
推荐答案
这不是引导程序的标准功能,因此您需要将JS click事件绑定到图标,然后触发即可关闭父 .card
。我还向该图标添加了 cursor:指针
,使其看起来像可以单击的东西。
This isn't a standard feature of bootstrap, so you need to bind a JS click event to the icon, and trigger it to close the parent .card
. I also added cursor: pointer
to the icon so that it looks like something you can click on.
$('.close-icon').on('click',function() {
$(this).closest('.card').fadeOut();
})
.close-icon {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card card-outline-danger text-center">
<span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
这篇关于如何在引导卡上添加关闭按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!