在用户单击带有javascript的图标后，如何取消popover？
在用户单击带有javascript的图标后，如何取消popover？
提问于 2022-03-10 02:40:59
当用户使用此代码单击页面的外部或任何位置时，如何排除弹出？
$(document).ready(function() {
$('#companyNameInfo').popover({
html: true,
content: function() {
return `<p><i>Your company name </i></p>`;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="col-lg-12 mb-3">
<label class="mb-2"><b><span style="color:#e60000;">*</span> Company name</b> <i class="fa fa-info-circle pointer" id="companyNameInfo" ></i></label>
<br>
<input class="from-control" type="text" id="comp_name" autocomplete="off">
</div>
回答 1
Stack Overflow用户
发布于 2022-03-10 02:48:53
我不知道如何处理jQuery，但我认为这是相同的逻辑。
下面是对我有用的纯JS代码：
<div id="popup" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="ad-banner">Header <span class="close">×</span></h2>
</div>
<div class="modal-body">
<p id="modal-top-sentence" class="lead"><strong>Title</strong></p>
<p class="lead">Subtitle</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("popup");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Open the modal when tab is loaded
window.onload = function(){
setTimeout(function(){
modal.style.display = "block";
}, 3000);
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on the link, close the modal
document.getElementById("alternative-close-modal").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71418239
复制相关文章
相似问题
腾讯云开发者
