¿Cómo descarto la ventana emergente cuando el usuario hace clic fuera o en cualquier lugar dentro de la página con este código?
$(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>No estoy seguro de cómo hacerlo con jQuery, pero creo que es la misma lógica.
Aquí hay un código JS puro que funcionó para mí:
<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>