Fermer une div

Bonjour,

J'utilise une fonction javascript pour afficher une div (.msg_pop) qui va prendre tout la page.
Ensuite, via un peu d'ajax, j'appelle une page qui affiche une autre div (.msg_pop_interne) qui s'affichera au milieu de la page.

Voici le code CSS :

.msg_pop {
	position:fixed;
	top:0; 
	left: 0;
	height: 100%; 
	width: 100%;
}

.msg_pop_interne {
	width: 350px;
	margin-top: 250px;
	margin-left: auto; 
	margin-right: auto; 
}

Voici le script

function popup()
{
	getXhr();
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4 && xhr.status == 200)
		{

			document.getElementById('msg_pop').className='msg_pop'; // Affiche la div
			document.getElementById('msg_pop').innerHTML=xhr.responseText;
		}
	}

	xhr.open("GET","./ajax/popup.php,true); // Dans cette page se situe la div .msg_pop_interne
	xhr.send(null);
}

Code HTML

<div id="msg_pop"></div>
<a href="javascript:;" onclick="popup(); return false;">Ouvre la pop-up en plein milieu</a>

Actuellement, pour fermer .msg_pop je suis obligé de cliquer sur un bouton "fermer", qui se situe dans la div .msg_pop_interne

J'aimerai, lorsque je clique à côté de cette div (.msg_pop_interne), soit donc sur .msg_pop, pouvoir la fermer.

Seriez-vous comment faire ?

Merci.

mmmmh... Je ne suis pas certain d'avoir tout saisi parce que ça m'a l'air un peut trop simple :

Modifie un peu le css pour créer deux états :

#msg_pop {
	position:fixed;
	top:0; 
	left: 0;
	height: 100%; 
	width: 100%;
}

.visible {
	display: none;
}
.invisible {
	display: block;
}

Rajoute la classe invisible à ton conteneur :

<div id="msg_pop" class="invisible"></div>

Dans la fonction popup, la classe de msg_pop sera changé pour "visible".
Et ajoute un petit script pour rendre le conteneur invisible lorsque l'on clique dessus

document.getElementById('msg_pop').onclick = function() {
	document.getElementById('msg_pop').className = 'invisible';
}

Ça marche ?

Salut,

Tu as tout à fait saisi ce que je souhaitais faire.
J'ai utilisé la fonction que tu m'as indiqué, elle marche, le seul hic, c'est que lorsque je le clique à l'intérieur de ma div "msg_pop_interne" et non pas à l'extèrieur, la div "msg_pop" s'efface quand même.
Pourtant le onclick est bien renseigné pour "msg_pop".

J'ai essayé de mettre un z-index:100 sur .msg_pop_interne pour qu'elle soit en haut, mais rien n'y fait.

Aurais-tu une solution ?
Merci