如何在靜態popover中添加關閉圖標（x）？

我有靜態彈出窗口，使用bootstrap。我想在標題上使用像（x）這樣的關閉圖標，這應該會關閉（或擦除）該彈出窗口。這是靜態的，我不知道我該如何做到這一點。如何在靜態popover中添加關閉圖標（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/

來源

2017-08-06 Nihat Özyedi

創建具有絕對位置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>

來源

2017-08-06 10:43:17 ewwink

Thnks了很多，它的工作。 –

真的嗎？把它放在一個片段中，並添加*嘗試這個*，並不是真正的答案。：/ –

更新了我的答案：D – ewwink

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

Sinply添加一些JavaScript代碼擦除的酥料餅。

來源

2017-08-06 10:35:11

Updated檢查你的小提琴。你需要使用字體真棒。

<h3 class="popover-title">Popover <i class="fa fa-times"></i></h3> 


.popover-title i{ 
    float:right 
}

更新

$(function(){ 
 
\t $('.fa-times').on('click',function(){ 
 
    \t $('.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>

來源

2017-08-06 10:40:30

您可以添加X按鈕h3標籤是這樣的：

<h3 class="popover-title">Popover <a style='float:right;' class='close_pop'>x</a></h3>

，然後使彈出hide上點擊X按鈕

$('.close_pop').click(function(){ 
    $('.popover').hide(300); 
});

和這裏是你的jsfiddle https://jsfiddle.net/34tsayyL/3/

來源

2017-08-06 10:47:44

$(".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>

來源

2017-08-06 10:48:05

如何在靜態popover中添加關閉圖標（x）？

回答

相關問題