Os cuento. Nuestro proyecto consiste en hacer una pagina web sobre los viñedos que hay en españa. Cuando entramos a la pagina, se nos aparecen 3 provincias (Cada provincia es un boton).Cuando pulsamos algunas de las provincias, salen los viñedos que hay en esa provincia y esos viñedos tambien son botones. La cuestion es que cuando pusamos el boton de algun viñedo nos sale un pop-up (ventana emergente) con toda la informacion y se nos cierra muy bien. (Recordar que todos los pop-up de los viñedos las crea al iniciar la pagina). El problema que tenemos es el siguiente. Tenemos un buscador que busca los viñedos y cuando pones el nombre de los viñedos nos habre los pop-up con toda la informacion, pero el problema es que el pop-up se inicia como una ventana sevundaria, es decir se ve , pero no podemos interactuar con ellas. (Los pop-ups que hay que enseñar son los que se crean al principio, es decir, cuando busco un nombre abre el pop-up que le corresponde.). Porque puede suceder esto? He mirado todo el CSS y no veo nada raro.
Código HTML:
Ver original<!DOCTYPE HTML>
<meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="css/resp.css" /> <link rel="stylesheet" media="screen and (max-width: 750px)" href="css/resp1.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/formulario.js" type="text/javascript"></script> <script src="js/bodegas.js" type="text/javascript"></script> <li id="tienda"><a href="http://tiendakelo-kelotienda.rhcloud.com/es/"><img src="images/cart.png" width="50%" height="50%"></a></li> <li id="contacto"><a href="#formulario"><img src="images/envelope54.png" width="50%" height="50%"></a></li> <h1 id="logo"><a href="index.html"><img src="images/kelologo.png"></img></a></h1>
<!-- name="q" -->
<input type="text" class="tftextinput" name="q" id="texto" placeholder="Nombre Viñedo"/><button id="buscar" type="button" class="tfbutton"><img src="images/magnifier52.png" width="35px" height="35px"></button> <a href="#abajo">vamos abajo
</a> <div id="box1" value="vinos_navarra"> <p id="subtit">Nafarroa
</p> <div id="box2" value="vinos_rioja"> <p id="subtit">Errioxa
</p> <div id="box3" value="vinos_alava"> <!-- Formulario -->
<!-- Estará escondido hasta que se pulse el botón de contacto -->
<div id="formulario" class="modalDialog" > <a href='#close' title='Close' class='close'>X
</a> <form method="post" id="formulario"> <input id="nombre" type="text" value="" size="8" tabindex="1"> <input id="email" type="email" value="" maxlength="255" tabindex="3"> <input id="asunto" type="text" value="" size="8" tabindex="1"> <input id="saveForm" name="saveForm" type="button" value="Enviar" onclick="enviar()">
Código CSS:
Ver original/***************************************************************************/
/** SEARCH/BUSCADOR */
#tfnewsearch{
margin-left: 8%;
float:right;
padding:20px;
}
.tftextinput{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:30px;
border-top-left-radius: 7px 7px;
border-bottom-left-radius: 7px 7px;
}
.tfbutton {
margin: 0;
cursor: pointer;
margin-top: 15px;
border: solid 1px rgba(120,14,62,0.7);
background-color: rgba(120,14,62,0.7);
border-top-right-radius: 7px 7px;
border-bottom-right-radius: 7px 7px;
}
.tfbutton:hover {
text-decoration: none;
background-color:#780E3E;
}
/* Soluciona el problema del submit boton con el height en FIrefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
/***************************************************************************/
/* Los Viñedos de cada provincia */
#vinos_navarra{
display:none;
margin: 20px;
padding: 20px;
}
/*#vinos_navarra > div{
width: 100px;
height: 80px;
}*/
#vinos_navarra > div > img{
width: 100px;
height: 80px;
}
#vinos_rioja{
display:none;
margin: 20px;
padding: 20px;
}
/*#vinos_rioja > div{
width: 100px;
height: 80px;
}*/
#vinos_rioja > div > img{
width: 100px;
height: 80px;
}
#vinos_alava{
display:none;
margin: 20px;
padding: 20px;
}
/*#vinos_alava > div{
width: 100px;
height: 80px;
}*/
/* Borrable?¿ */
#vinos_alava > div > img{
width: 100px;
height: 80px;
}
#vinos_navarra > li {
list-style: none;
}
#vinos_rioja > li {
list-style: none;
}
#vinos_alava > li {
list-style: none;
}
/*||*/
/***/
#vinos_navarra article {
margin: 3% 0 4% 3.8%;
display: inline-block;
width: 20%;
height: 300px;
text-align: center;
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
overflow: hidden;
}
#vinos_navarra article img {
width: 100%;
max-height: 160px;
min-height: 100px;
}
#vinos_navarra h3 {
margin: 5% 0 3% 0;
font-family: 'Lora', serif;
color: #303030;
}
#vinos_navarra p {
padding: 2%;
font-size: 90%;
font-family: 'Courgette', cursive;
color: #797070;
}
#vinos_rioja article {
margin: 3% 0 4% 3.8%;
display: inline-block;
width: 20%;
height: 300px;
text-align: center;
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
overflow: hidden;
}
#vinos_rioja article img {
width: 100%;
max-height: 160px;
min-height: 100px;
}
#vinos_rioja h3 {
margin: 5% 0 3% 0;
font-family: 'Lora', serif;
color: #303030;
}
#vinos_rioja p {
padding: 2%;
font-size: 90%;
font-family: 'Courgette', cursive;
color: #797070;
}
#vinos_alava article {
margin: 3% 0 4% 3.8%;
display: inline-block;
width: 20%;
height: 300px;
text-align: center;
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
overflow: hidden;
}
#vinos_alava article img {
width: 100%;
max-height: 160px;
min-height: 100px;
}
#vinos_alava h3 {
margin: 5% 0 3% 0;
font-family: 'Lora', serif;
color: #303030;
}
#vinos_alava p {
padding: 2%;
font-size: 90%;
font-family: 'Courgette', cursive;
color: #797070;
}
/***************************************************************************/
/*POP UP*/
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
a.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
a.close:hover {
cursor: pointer;
background: #00d9ff;
}
He tenido que quitar un monton de lineas de codigo para meterlo.
Si quereis ver todo el codigo aqui lo teneis: [URL="https://github.com/proyecto-kelo/kelo/tree/master/public"]https://github.com/proyecto-kelo/kelo/tree/master/public[/URL]