如何在静态弹出窗口中添加关闭图标 (x)?

Posted

技术标签:

【中文标题】如何在静态弹出窗口中添加关闭图标 (x)?【英文标题】:How can i add close icon (x) in static popover? 【发布时间】:2018-01-13 19:48:41 【问题描述】:

我有静态弹出窗口,使用引导程序。我想要标题上的(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>

这是我的小提琴

https://jsfiddle.net/34tsayyL/

【问题讨论】:

【参考方案1】:

创建具有绝对位置的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>

【讨论】:

真的吗?将其放入 sn-p 并添加 try this 并不是真正的答案。 ://【参考方案2】:
 <button onclick="document.querySelector('.popover').remove()">
  X
 </button>

只需添加一些 擦除弹出框的 javascript。

【讨论】:

【参考方案3】:

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

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

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>

【讨论】:

以上是关于如何在静态弹出窗口中添加关闭图标 (x)?的主要内容,如果未能解决你的问题,请参考以下文章

如何在离子的inAppBrowser内的后退按钮上添加确认弹出窗口

苹果手机怎么阻止弹出网页

如何修改代码 - 弹出窗口,附加关闭选项

可以在文件”另存为“的弹出窗口上添加自定义的路径选择按钮?

电脑弹出广告窗口如何拦截

谷歌浏览器如何关闭JavaScript