Probleme pour fermer mon popup css

Bonjour,



Sur cette image j'ai une grande div en position absolute, et quand je clique dessu je ferme le popup. De plus j'ai une petite div contenant le formulaire de connexion et qui se ferme grace a la croix.

Mon probleme c'est que quand je clique sur la zone blanche de ma petite div, ca ferme le popup. Je voudrait fermer ce popup seulement quand je clique en dehors de ma petite div.

Voila mes fonction pour fermer/ouvrir le popup :

function openModal(modalNumber) {
document.getElementById("modal"+modalNumber).style.display = "block";
}

function closeModal(modalNumber) {
document.getElementById("modal"+modalNumber).style.display = "none";
}

et le code de mon popup :
<div id="modal1" class="modal" onclick="closeModal(1)">
<div class="modal-content modal1">
<!-- boutton de fermeture -->
<a class="close" onclick="closeModal(1)">×</a>
//contenu
</div>
</div>

J'ai deja essayer de toucher aux Z-index mais sans succès, je pense que le probleme vient du premier onclick qui "s'herite" sur toute ma petite div (vu qu'il est mit sur la div parent), mais je ne sais pas comment corriger ca.

PS : je travaille sur Firefox mais je voudrait que ca soit compatible avec tous les navigateurs

Merci d'avance