如何在静态弹出窗口中添加关闭图标 (x)?
How can i add close icon (x) in static popover?
我有静态弹出窗口,使用 bootstrap。我想要标题上的 (x) 之类的关闭图标,这应该关闭(或擦除)此弹出窗口。这是静态的,我不知道我该怎么做。
等待您的帮助,谢谢。
这是我的代码:
<style>
.static-popover .popover {
display: block;
}
</style>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover</h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
这是我的fiddle
<button onclick="document.querySelector('.popover').remove()">
X
</button>
只需添加一些 javascript 即可 擦除 弹出窗口。
Updated 检查你 fiddle。你需要使用很棒的字体。
<h3 class="popover-title">Popover <i class="fa fa-times"></i></h3>
.popover-title i{
float:right
}
已更新
$(function(){
$('.fa-times').on('click',function(){
$('.popover').hide();
})
});
.static-popover .popover {
display: block;
}
.popover-title i {
float:right;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover <i class="fa fa-times"></i></h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
创建具有绝对位置的 span
元素,然后添加侦听器 element.remove()
以删除目标元素。
.static-popover .popover {
display: block;
}
.close {
position: absolute;
right: 10px;
top: 5px;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover</h3>
<span class="close" onclick="document.querySelector('.popover').remove()">x</span>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
您可以像这样将 x 按钮添加到 h3
标签:
<h3 class="popover-title">Popover <a style='float:right;' class='close_pop'>x</a></h3>
然后在点击 x 按钮
时弹出 hide
$('.close_pop').click(function(){
$('.popover').hide(300);
});
这是你的 jsfiddle
https://jsfiddle.net/34tsayyL/3/
$(".close").on('click',function(){
$(this).parent().parent().fadeOut();
});
.static-popover .popover {
display: block;
}
.popover-title span {
float:right;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover <span class="close" >☓</span></h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
我有静态弹出窗口,使用 bootstrap。我想要标题上的 (x) 之类的关闭图标,这应该关闭(或擦除)此弹出窗口。这是静态的,我不知道我该怎么做。
等待您的帮助,谢谢。
这是我的代码:
<style>
.static-popover .popover {
display: block;
}
</style>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover</h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
这是我的fiddle
<button onclick="document.querySelector('.popover').remove()">
X
</button>
只需添加一些 javascript 即可 擦除 弹出窗口。
Updated 检查你 fiddle。你需要使用很棒的字体。
<h3 class="popover-title">Popover <i class="fa fa-times"></i></h3>
.popover-title i{
float:right
}
已更新
$(function(){
$('.fa-times').on('click',function(){
$('.popover').hide();
})
});
.static-popover .popover {
display: block;
}
.popover-title i {
float:right;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover <i class="fa fa-times"></i></h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
创建具有绝对位置的 span
元素,然后添加侦听器 element.remove()
以删除目标元素。
.static-popover .popover {
display: block;
}
.close {
position: absolute;
right: 10px;
top: 5px;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover</h3>
<span class="close" onclick="document.querySelector('.popover').remove()">x</span>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>
您可以像这样将 x 按钮添加到 h3
标签:
<h3 class="popover-title">Popover <a style='float:right;' class='close_pop'>x</a></h3>
然后在点击 x 按钮
时弹出hide
$('.close_pop').click(function(){
$('.popover').hide(300);
});
这是你的 jsfiddle https://jsfiddle.net/34tsayyL/3/
$(".close").on('click',function(){
$(this).parent().parent().fadeOut();
});
.static-popover .popover {
display: block;
}
.popover-title span {
float:right;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container static-popover">
<div class="col-md-2">
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover <span class="close" >☓</span></h3>
<div class="popover-content">
<p>Here is some content</p>
</div>
</div>
</div>
</div>