Estoy creando una ventana emergente para mis productos cuando se hace clic en un icono. Quiero hacer que la ventana emergente desaparezca automáticamente una vez que el usuario haga clic en algún lugar fuera del cuadro emergente. Actualmente, la única forma de que la ventana emergente se cierre y desaparezca es hacer clic en el mismo botón de icono que hace que aparezca la ventana emergente. Le agradecería que me ayudara usando el código que proporcioné, ya que soy un principiante y probablemente no pueda incorporar sugerencias generales, ¡pero por supuesto haré lo mejor que pueda! Muchas gracias chicos por la ayuda y las sugerencias de antemano.

Código emergente HTML

 <div class="box"> <div class="icons"> <a href="#contact" class="fas fa-shopping-cart"></a> <div class="popup" onclick="myFunction()"> <span class="popuptext" id="myPopup">RAW Pipe Cleaners are naturally strong and absorbent and wrapped around a flexible banded iron core. These are the natural way to clean your pipe or rig! A RAW Innovation!</span> <a href="#" class="fas fa-info"> </a></div> <a href="#" class="fas fa-eye"></a> </div>

Código CSS emergente

 /* Popup container */ .popup { position: relative; display: inline-block; cursor: pointer; } /* The actual popup (appears on top) */ .popup .popuptext { visibility: hidden; width: 300px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: -740%; left: 50%; margin-left: -150px; height: 400px; font-size: 18px; padding: 50%; } /* Toggle this class when clicking on the popup container (hide and show the popup) */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} }

Código JS emergente

 // When the user clicks on <div>, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); }