CSS - problema con ventana modal

 
Vista:
sin imagen de perfil
Val: 4
Ha aumentado su posición en 8 puestos en CSS (en relación al último mes)
Gráfica de CSS

problema con ventana modal

Publicado por raquel (3 intervenciones) el 29/04/2018 01:07:18
Hola gente!!
A ver si me pueden ayudar con esto que me tiene loca. Verán, estoy tratando de meter dos textos en dos ventanas modales distintas, tal que en una meto un enunciado, y en la otra la respuesta, para una web de ejercicios, el caso es que al mostrar la segunda, siempre, incluso con el texto comentado, me sigue mostrando el texto de la primera. Me he vuelto loca, cambiandole los nombres a las clases, aunque no deberia de afectar, peeeero nunca se sabe.

os pongo el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<article class="enunciado">
    <h2>ENUNCIADO</h2>
    <a href="#popup" class="popup-link"><img src="../../../../imagenes/resultado.png" class="resultado"></a>
    <div class="modal-wrapper" id="popup">
        <div class="popup-contenedor">
            <h3>Ejercicio 1</h3>
            <p>Investiga y responde las siguientes preguntas:</p>
            <p>a.- ¿Por qué necesitamos una metodología?</p>
            <p>b.- ¿Sirve el modelo de ciclo de vida Code &amp; Fix?</p>
            <p>c.- ¿Existe algún modelo de ciclo de vida que predomine?</p>
            <p>d.- ¿Seguir un modelo de ciclo de vida, nos garantiza el éxito del desarrollo?</p>
            <p>e.- ¿Se puede medir la incertidumbre que tenemos sobre los requerimientos iniciales?</p>
            <p>f.- ¿La generación de programas prototipo, es exclusiva de un solo modelo de ciclo de vida?</p>
            <p>g.- ¿Podemos utilizar un lenguaje imperativo para el modelo de ciclo de vida orientado a objetos?</p>
            <p>h.- Enumere el ciclo de vida y los pasos que seguiría, si debiese desarrollar una aplicación que monitoree el estado de las redes de una empresa.</p>
            <p>i.- Realice una lista de requerimientos hipotéticos para una aplicación que deba ejecutar archivos de música, pida la misma lista a un usuario no programador y compare las listas. ¿Qué enfoques encuentra en cada lista?</p>
            <p>A modo de encuesta, pregunte a sus colegas programadores, quién y por qué ha utilizado un ciclo de vida. Indague sobre los resultados obtenidos.</p>
         <a class="popup-cerrar" href="#">X</a>
        </div>
    </div>
</article>
 
<article class="enunciado2">
    <h2>RESULTADO</h2>
    <a href="#popup" class="popup-link2"><img src="../../../../imagenes/exam.png" class="resultado"></a>
    <div class="modal-wrapper" id="popup">
        <div class="popup-contenedor2">
            <!--<h3>Resolución:</h3>

            <p>a.- Por la necesidad de adaptar los sistemas informáticos a las exigencias del mercado, el programador realizaba un relevamiento de las solicitudes de quien necesitaba cierto programa o producto software, y con aquellos requerimientos bajo el brazo comentaba la dura tarea de codificar.</p>	
            <p>b.- Esta técnica tiene la ventaja de no gastar recursos en análisis, planificación, gestión de recursos, documentación, etc.. es cómoda, y muchas veces recomendable cuando el proyecto es muy pequeño. Por otro lado cuando el sistema no es pequeño o es más complejo nos trae desventajas en lo que se refiere a costo de recursos, que siempre será mayor del previsto, aumentando el tiempo de desarrollo y la calidad del código será bastante dudosa.</p>
            <p>c.- No existe un ciclo de vida que predomine ya que esto depende de las necesidades y requerimientos del software o de la situación en que se encuentren para desarrollarlo, la complejidad del problema, el tiempo que disponemos para hacer la entrega final, o si el usuario o cliente desea entregas parciales, sin embargo el Ciclo de Vida por Prototipos, es un modelo el que se basan la mayoría pues por lo regular solo han estado modificándolo pero no se han retirado de sus bases. Permite suavizar la transición entre los requerimientos iniciales y finales que surgen en la creación de un proyecto con grandes innovaciones.</p>
            <p>d.- Seguir un ciclo de vida ayuda mucho para llevar un control del desarrollo del software, y nos ayuda a poder conseguir el éxito sin embargo no es garantizado, ya que siempre existen factores inesperados, además un software nunca es perfecto</p>
            <p>e.- Si, porque el cliente puede cambiar de opinión o añadir requerimientos.</p>
            <p>f.- No, no es exclusiva de un solo ciclo de vida. En la práctica los prototipos se utilizan para validar los requerimientos de los usuarios en cualquier ciclo de vida.</p>
            <p>g.- No es correcto suponer que este modelo sólo es útil cuando se escoge para la implementación del lenguaje elegido. Es un modelo a seguir, una técnica y no nos obliga a utilizar ningún lenguaje.</p>
            <p>h.- Optaría por el ciclo de vida incremental porque permite repartir el trabajo por departamentos, garantizando un trabajo más rápido y complementario.</p>
                <ol>
                    <li>Análisis de requerimientos del cliente</li>
                    <li>Informaación sobre el tema</li>
                    <li>Diseño del software</li>
                    <li>Codificación del software</li>
                    <li>Pruebas de estrés</li>
                    <li>Documentación</li>
                    <li>Mantenimiento</li>
                </ol>
            <p>i.- </p>
                    <ol>
                    <li>Capacidad para leer todas las extensiones de música</li>
                    <li>Capacidad de ecualización</li>
                    <li>Distribución de las pistas por género, álbum, cantante</li>
                    <li>Interfaz moderna</li>
                    <li>Compatible con múltiples plataformas</li>
                    <li>Con acceso a internet para búsqueda de artistas relacionados, información de pista, etc..</li>
                    <li>Poseer campo "ajustes" para poder configurar la interfaz y las funciones</li>
                    </ol>
            <p>A modo de encuesta, pregunte a sus colegas programadores, quién y por qué ha utilizado un ciclo de vida. Indague sobre los resultados obtenidos.</p> -->
         <a class="popup-cerrar2" href="#">X</a>
        </div>
    </div>
 
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//estilo en css//
 
#popup {
   visibility: hidden;
   opacity: 0;
   margin-left: -300px;
}
#popup:target {
   visibility:visible;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   transition:all 1s;
}
.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
.popup-contenedor2 {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
   font-size:12px;
}
 
a.popup-link {
	    text-align: left;
	    display: block;
	    margin: 30px 0;
	}
a.popup-link2 {
	    text-align: left;
	    display: block;
	    margin: 30px 0;
	}
 
a.popup-cerrar {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}
 
a.popup-cerrar2 {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}

/// como vereis solo les he puesto el numero 2 jajaja. es una chorrada, simplemente quise ver si era la clase la que estaba dando problemas, pero no, no lo es,,,, asi que realmente me puedo ahorrar las clases duplicadas y utilizar una para ambos articles, no se porque me muestra el mismo texto en las dos ventanas modales, es todo un misterio. Me podeis ayudar xfis???
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

problema con ventana modal

Publicado por juan jose (57 intervenciones) el 29/04/2018 10:05:05
el problema es que los modal-wrapper tienen la misma id, y un solo css por lo cua ldeberas de llamar de otra forma al segundo y generar su css


Html




1
2
3
4
<h2>RESULTADO</h2>
<a href="#popup" class="popup-link2"><img src="../../../../imagenes/exam.png" class="resultado"></a>
<div class="modal-wrapper" id="popup2"> <!-- cambio de id de popup a popup2 -->
<div class="popup-contenedor2">




Css



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#popup2 {
    visibility: hidden;
    opacity: 0;
    margin-left: -300px;
    }
#popup2:target {
    visibility:visible;
    opacity: 1;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    z-index: 999;
    transition:all 1s;
}

tendras que cambiar alguna posicion o el href, pero eso ya es estetica, no te funcionaba por esto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 4
Ha aumentado su posición en 8 puestos en CSS (en relación al último mes)
Gráfica de CSS

problema con ventana modal

Publicado por raquel (3 intervenciones) el 29/04/2018 10:37:49
me he dado cuenta!! LLevo toda la maldita noche soñando con el popup de las narices jajajaja y justo acabo de cambiar las ids, ya va perfecto!! gracias!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar