如何在静态弹出窗口中添加关闭图标（x）？

Question

我有静态弹出框，使用bootstrap。我想要关于标题的（x）关闭图标，这应该是关闭（或擦除）这个popover。这是静态的，我不知道我怎么能做到这一点。

等待你的帮助，谢谢你。

这是我的代码：

<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>

这是我的小提琴

https://jsfiddle.net/34tsayyL/

Answer 1

 <button onclick="document.querySelector('.popover').remove()">
  X
 </button>

Sinply添加一些删除 popover的JavaScript。

Answer 2

Updated检查你的小提琴。你需要使用字体真棒。

   <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>

Answer 3

使用绝对位置创建span元素，然后添加侦听器element.remove()以删除目标元素。

＆＃13;

＆＃13;

.static-popover .popover {
  display: block;
}

.close {
  position: absolute;
  right: 10px;
  top: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以将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/

Answer 5

＆＃13;

＆＃13;

$(".close").on('click',function(){
   $(this).parent().parent().fadeOut();

});

＆＃13;

.static-popover .popover {
display: block;
}

.popover-title span {
float:right;
}

＆＃13;

<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" >&#9747;</span></h3>
            <div class="popover-content">
                <p>Here is some content</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;