我有静态弹出窗口,使用 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
最佳答案
创建具有绝对位置的 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>
关于javascript - 如何在静态弹出窗口中添加关闭图标 (x)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45531081/