Foros del Web » Creando para Internet » HTML »

Problemas con pop up (html/css/JavaScript)

 Estas en el tema de Problemas con pop up (html/css/JavaScript) en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/02/2015, 01:38
 
Fecha de Ingreso: febrero-2015
Ubicación: San Sebastian
Mensajes: 1
Antigüedad: 9 años, 9 meses
Puntos: 0
Problemas con pop up (html/css/JavaScript)
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
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link rel="stylesheet" href="css/index.css" />
  7.     
  8.     
  9.     <link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="css/resp.css" />
  10.     <link rel="stylesheet" media="screen and (max-width: 750px)" href="css/resp1.css" />
  11.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
  12.         <script src="js/main.js" type="text/javascript"></script>
  13.         <script src="js/formulario.js" type="text/javascript"></script>
  14.         <script src="js/bodegas.js" type="text/javascript"></script>
  15.         <script src="js/slider.js"></script>
  16.     </head>
  17.     <title>Kelo - Inicio</title>
  18.     <body>
  19.         <div id="fondo">
  20.         <section id="header">
  21.             <nav id="menu">
  22.                 <ul id="nav">
  23.                     <li id="tienda"><a href="http://tiendakelo-kelotienda.rhcloud.com/es/"><img src="images/cart.png" width="50%" height="50%"></a></li>
  24.                     <li id="contacto"><a href="#formulario"><img src="images/envelope54.png" width="50%" height="50%"></a></li>
  25.                 </ul>
  26.             </nav>
  27.             <h1 id="logo"><a href="index.html"><img src="images/kelologo.png"></img></a></h1>
  28.             
  29.             <div id="tfnewsearch">
  30.                 <!-- name="q" -->
  31.                 <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>
  32.             </div>
  33.         </section>
  34.         </div>
  35.         <div id="otro">
  36.             <a href="#abajo">vamos abajo</a>
  37.         </div>
  38.         <section id="cuadrados">        
  39.             <div id="box1" value="vinos_navarra">
  40.                 <p id="tit">NAVARRA</p>
  41.                 <p id="subtit">Nafarroa</p>
  42.             </div>
  43.             <div id="box2" value="vinos_rioja">
  44.                 <p id="tit">LA RIOJA</p>
  45.                 <p id="subtit">Errioxa</p>
  46.             </div>  
  47.             <div id="box3" value="vinos_alava">
  48.                 <p id="tit">ALAVA</p>
  49.                 <p id="subtit">Araba</p>
  50.             </div>          
  51.         </section>
  52.         <a id="abajo"></a>
  53.         <section id="vinos_navarra">
  54.             <h1>Navarra</h1>
  55.         </section>
  56.         <section id="vinos_rioja">
  57.             <h1>La Rioja</h1>
  58.         </section>
  59.         <section id="vinos_alava">
  60.             <h1>Alava</h1>
  61.         </section>
  62.         <!-- Formulario -->
  63.         <!-- Estará escondido hasta que se pulse el botón de contacto -->
  64.         <div id="formulario" class="modalDialog" >
  65.             <div>
  66.             <a href='#close' title='Close' class='close'>X</a>
  67.                 <form method="post" id="formulario">
  68.                     <div>
  69.                     <label>Nombre</label>
  70.                         <div>
  71.                             <input id="nombre" type="text" value="" size="8" tabindex="1">
  72.                         </div>
  73.                     </div> 
  74.                     <div>
  75.                     <label>Email</label>
  76.                         <div>
  77.                             <input id="email" type="email" value="" maxlength="255" tabindex="3">  
  78.                         </div>
  79.                     </div>
  80.                     <div>
  81.                     <label>Asunto</label>
  82.                         <div>
  83.                             <input id="asunto" type="text" value="" size="8" tabindex="1">
  84.                         </div>
  85.                     </div>
  86.                     <div>
  87.                     <label >Mensaje</label>
  88.                         <div>
  89.                             <textarea id="mensaje" rows="10" cols="50" tabindex="4"></textarea>
  90.                         </div>
  91.                     </div>
  92.                     <div>
  93.                         <div>
  94.                         <input id="saveForm" name="saveForm" type="button" value="Enviar" onclick="enviar()">
  95.                         </div>
  96.                     </div>
  97.                 </form>
  98.             </div>
  99.         </div>
  100.         
  101.     </body>
  102. </html>

Código CSS: 
Ver original
  1. /***************************************************************************/
  2. /** SEARCH/BUSCADOR */
  3. #tfnewsearch{
  4.     margin-left: 8%;
  5.     float:right;
  6.     padding:20px;
  7. }
  8. .tftextinput{
  9.     margin: 0;
  10.     font-family: Arial, Helvetica, sans-serif;
  11.     font-size:30px;
  12.     border-top-left-radius: 7px 7px;
  13.     border-bottom-left-radius: 7px 7px;
  14. }
  15. .tfbutton {
  16.     margin: 0;
  17.     cursor: pointer;
  18.     margin-top: 15px;
  19.     border: solid 1px rgba(120,14,62,0.7);
  20.     background-color: rgba(120,14,62,0.7);
  21.     border-top-right-radius: 7px 7px;
  22.     border-bottom-right-radius: 7px 7px;
  23. }
  24. .tfbutton:hover {
  25.     text-decoration: none;
  26.     background-color:#780E3E;
  27. }
  28. /* Soluciona el problema del submit boton con el height en FIrefox  */
  29. .tfbutton::-moz-focus-inner {
  30.   border: 0;
  31. }
  32. /***************************************************************************/
  33. /* Los Viñedos de cada provincia */
  34. #vinos_navarra{
  35.     display:none;
  36.     margin: 20px;
  37.     padding: 20px;
  38. }
  39. /*#vinos_navarra > div{
  40.     width: 100px;
  41.     height: 80px;
  42. }*/
  43. #vinos_navarra > div > img{
  44.     width: 100px;
  45.     height: 80px;
  46. }
  47. #vinos_rioja{
  48.     display:none;
  49.     margin: 20px;
  50.     padding: 20px;
  51. }
  52. /*#vinos_rioja > div{
  53.     width: 100px;
  54.     height: 80px;
  55. }*/
  56. #vinos_rioja > div > img{
  57.     width: 100px;
  58.     height: 80px;
  59. }
  60. #vinos_alava{
  61.     display:none;
  62.     margin: 20px;
  63.     padding: 20px;
  64. }
  65. /*#vinos_alava > div{
  66.     width: 100px;
  67.     height: 80px;
  68. }*/
  69. /* Borrable?¿ */
  70. #vinos_alava > div > img{
  71.     width: 100px;
  72.     height: 80px;
  73. }
  74. #vinos_navarra > li {
  75.     list-style: none;
  76. }
  77. #vinos_rioja > li {
  78.     list-style: none;
  79. }
  80. #vinos_alava > li {
  81.     list-style: none;
  82. }
  83. /*||*/
  84. /***/
  85. #vinos_navarra article {
  86.     margin: 3% 0 4% 3.8%;
  87.     display: inline-block;
  88.     width: 20%;
  89.     height: 300px;
  90.     text-align: center;
  91.     box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
  92.     overflow: hidden;
  93. }
  94.  
  95. #vinos_navarra article img {
  96.     width: 100%;
  97.     max-height: 160px;
  98.     min-height: 100px;
  99. }
  100.  
  101. #vinos_navarra h3 {
  102.     margin: 5% 0 3% 0;  
  103.     font-family: 'Lora', serif;
  104.     color: #303030;
  105. }
  106.  
  107. #vinos_navarra p {
  108.     padding: 2%;    
  109.     font-size: 90%;
  110.     font-family: 'Courgette', cursive;
  111.     color: #797070;
  112. }
  113. #vinos_rioja article {
  114.     margin: 3% 0 4% 3.8%;
  115.     display: inline-block;
  116.     width: 20%;
  117.     height: 300px;
  118.     text-align: center;
  119.     box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
  120.     overflow: hidden;
  121. }
  122.  
  123. #vinos_rioja article img {
  124.     width: 100%;
  125.     max-height: 160px;
  126.     min-height: 100px;
  127. }
  128.  
  129. #vinos_rioja h3 {
  130.     margin: 5% 0 3% 0;  
  131.     font-family: 'Lora', serif;
  132.     color: #303030;
  133. }
  134.  
  135. #vinos_rioja p {
  136.     padding: 2%;    
  137.     font-size: 90%;
  138.     font-family: 'Courgette', cursive;
  139.     color: #797070;
  140. }
  141. #vinos_alava article {
  142.     margin: 3% 0 4% 3.8%;
  143.     display: inline-block;
  144.     width: 20%;
  145.     height: 300px;
  146.     text-align: center;
  147.     box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.75);
  148.     overflow: hidden;
  149. }
  150.  
  151. #vinos_alava article img {
  152.     width: 100%;
  153.     max-height: 160px;
  154.     min-height: 100px;
  155. }
  156.  
  157. #vinos_alava h3 {
  158.     margin: 5% 0 3% 0;  
  159.     font-family: 'Lora', serif;
  160.     color: #303030;
  161. }
  162.  
  163. #vinos_alava p {
  164.     padding: 2%;    
  165.     font-size: 90%;
  166.     font-family: 'Courgette', cursive;
  167.     color: #797070;
  168. }
  169. /***************************************************************************/
  170. /*POP UP*/
  171. .modalDialog {
  172.     position: fixed;
  173.     font-family: Arial, Helvetica, sans-serif;
  174.     top: 0;
  175.     right: 0;
  176.     bottom: 0;
  177.     left: 0;
  178.     background: rgba(0,0,0,0.8);
  179.     z-index: 99999;
  180.     opacity:0;
  181.     -webkit-transition: opacity 400ms ease-in;
  182.     -moz-transition: opacity 400ms ease-in;
  183.     transition: opacity 400ms ease-in;
  184.     pointer-events: none;
  185. }
  186. .modalDialog:target {
  187.     opacity:1;
  188.     pointer-events: auto;
  189. }
  190.  
  191. .modalDialog > div {
  192.     width: 400px;
  193.     position: relative;
  194.     margin: 10% auto;
  195.     padding: 5px 20px 13px 20px;
  196.     border-radius: 10px;
  197.     background: #fff;
  198.     background: -moz-linear-gradient(#fff, #999);
  199.     background: -webkit-linear-gradient(#fff, #999);
  200.     background: -o-linear-gradient(#fff, #999);
  201.     -webkit-transition: opacity 400ms ease-in;
  202.     -moz-transition: opacity 400ms ease-in;
  203.     transition: opacity 400ms ease-in;
  204. }
  205. a.close {
  206.     background: #606061;
  207.     color: #FFFFFF;
  208.     line-height: 25px;
  209.     position: absolute;
  210.     right: -12px;
  211.     text-align: center;
  212.     top: -10px;
  213.     width: 24px;
  214.     text-decoration: none;
  215.     font-weight: bold;
  216.     -webkit-border-radius: 12px;
  217.     -moz-border-radius: 12px;
  218.     border-radius: 12px;
  219.     -moz-box-shadow: 1px 1px 3px #000;
  220.     -webkit-box-shadow: 1px 1px 3px #000;
  221.     box-shadow: 1px 1px 3px #000;
  222. }
  223. a.close:hover {
  224.     cursor: pointer;
  225.     background: #00d9ff;
  226. }



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]

Etiquetas: boton, css, input, pop, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:25.