How do I dismiss popover after user click on the icon with javascript?

user_15041499 0
Viewed 23

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> &nbsp; <i class="fa fa-info-circle pointer" id="companyNameInfo" ></i></label>
  <br>
  <input class="from-control" type="text" id="comp_name" autocomplete="off">
</div>

popover html javascript
1 Answers

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">&times;</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>
user_164307520
Related