How do I dismiss popover when user click outside or anywhere in inside the page with this code ?
$(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>I am not sure how to do with jQuery, but I think it's the same logic.
Here's pure JS code that worked for me:
<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>