Pop-up qui ne veut pas se fermer.

Bonsoir,

Je continue la refonte du site d'un ami en me basant sur un template trouvé sur le net. C'est pas toujours évident parce que je n'ai pas touché HTML et compagnie depuis longtemps (et comprendre la logique d'un autre, c'est pas toujours simple) mais j'ai réussi à structurer à peu près le site comme je le voulais.

Bref, j'ai un petit souci. De base, il y avait 4 onglets dans la Navbar. J'ai voulu en rajouter en dupliquant l'un deux et que j'ai nommé Test. Après quelques heures à m'arracher les cheveux, j'ai réussi à le faire fonctionner et à ouvrir le pop-up (en plus du HTML, une partie de la NavBar est pilotée par CSS et l'autre par du JS). Mais plus moyen ensuite de le refermer, sauf à rafraichir la page.

Et là, je sèche. J'ai dû oublier un petit paramètre quelque part. En gros, pour dupliquer l'onglet, j'ai recopier son code dans le HTML, le CSS et le JS en remplaçant partout le mot Blog par Test.

Merci à ceux qui voudront bien regarder .
http://arkayn.free.fr/temple/#

<!-- Blog -->
<article id="popupBlog" class="popupBlog">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h1>Blog</h1>
        <h2>Lorem ipsum</h2>
        <div class="date"><span class="day">24</span> <span class="month">May</span> <span class="year">2011</span> </div>
        <p>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="border"></div>
        <h2>Dolor sit amet</h2>
        <div class="date"><span class="day">22</span> <span class="month">May</span> <span class="year">2011</span> </div>
        <p>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>

<!-- Test -->
<article id="popupTest" class="popupTest">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupTestClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h1>Test</h1>
        <h2>Lorem ipsum</h2>
        <div class="date"><span class="day">24</span> <span class="month">May</span> <span class="year">2011</span> </div>
        <p>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        <div class="border"></div>
        <h2>Dolor sit amet</h2>
        <div class="date"><span class="day">22</span> <span class="month">May</span> <span class="year">2011</span> </div>
        <p>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        <div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>

Blog, l'onglet original et Test, la copie.

/* Pop Up */
#popupAbout, #popupProjects, #popupContact, #popupBlog, #popupTest{
	height: 600px;
	width: 900px;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.80);
	border: 1px solid #cecece;
	z-index: 15;
	padding: 20px;
	color: #FFF;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	margin-top: -50px;
	visibility: hidden;
}

#popupAbout p, #popupProjects p, #popupContact p, #popupBlog p, #popupTest p {
	padding-left: 10px;
	font-size: 16px;
	line-height: 24px;
}

#popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1, #popupTest h1 {
	text-align: left;
	font-size: 30px;
	letter-spacing: 1px;
	border-bottom: 1px dotted #D3D3D3;
	padding-bottom: 2px;
	margin: 0;
}

#popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose, #popupTestClose {
	right: 0;
	top: 15px;
	position: absolute;
	display: block;
	opacity: 0.5;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}

#popupAboutClose:hover, #popupProjectsClose:hover, #popupContactClose:hover, #popupBlogClose:hover, #popupTestClose:hover {
	opacity: 1;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}

//Test Page Pop Up
			var popupTesttatus = 0;
			function loadPopupTest(){
				if(popupTestStatus==0){
					$("#popupTest").fadeIn("slow");
					popupTestStatus = 1;
				}
			}

			function disablePopupTest(){
				if(popupTestStatus==1){
					$("#popuptest").fadeOut("slow");
					popupTestStatus = 0;
				}
			}

			function centerPopupTest(){
				var windowWidth = document.documentElement.clientWidth;
				var windowHeight = document.documentElement.clientHeight;
				var popupTestHeight = $("#popupTest").height();
				var popupTestWidth = $("#popupTest").width();
				$("#popupTest").css({
					"position": "absolute",
					"top": windowHeight/2-popupTestHeight/2,
					"left": windowWidth/2-popupTestWidth/2
				});
			}

			$(document).ready(function(){
				$("#popupTest").fadeOut();
				popupTestStatus = 0;
				$("#test").click(function(){
				$("#popupTest").css({
					"visibility": "visible"	});
					disablePopupAbout();
					disablePopupProjects();					
					disablePopupContact();					
					centerPopupTest();
					loadPopupTest();
				    $("#popupTest").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);	
				});
				$("#popupTestClose").click(function(){
					disablePopupTest();
				});
				$("#bg").click(function(){
					disablePopupTest();
				});
				$(document).keyup(function(e){
				if(e.keyCode === 27)
					disablePopupTest();
			});
			});			

J'ai essayé de ne mette que le minimum mais dont vous pourriez avoir besoin.

Et l'eau,

la premère voiture est vraiment jolie.

Vraiment aucune idée ? Ouin !

Niouxe, c'est vrai que la voiture est jolie, même si elle ne restera pas dans la version définitive du site.