modal con info de un campo
Publicado por ismael (3 intervenciones) el 29/07/2020 11:07:20
Ante todo buenos días y gracias de antemano por si alguien puede ayudarme.
Llevo unos días enfrascado intentando que una ventana modal me cargue un dato que tengo en una pagina de wordpress, es un sistema de inscripciones en el cual tu creas los cursos con una serie de datos que vas rellenando según el curso que creas, tipo dia de inicio, horario, profesor, descripcion del curso, etc.... todo esto metido en una tabla en la que cada celda carga uno de los datos, la idea es que en la últiima celda aparezca un botón de +INFO que al presionarlo cargue una ventana modal con el dato descripcion del curso correspondiente, he conseguido que se abra el modal y cargue en ella un dato descripción mi problema es que siempre es el mismo, no cambia según el curso como sí que cambian el resto de datos en las otras celdas de la tabla.
Alguien puede echarme una mano? os dejo el código
Aquí defino dos celdas en una va el dato del numero de clases y precio.... aquí cambia según la linea de curso, no problem... la linea de abajo es donde introduzco un boton que al presionarlo abre el modal. El modal es este...
además he añadido en funciones ajax...
y en app.cs....
Esto es todo lo que tengo hecho, la cuestión es que tengo dos problemas, al clickar en INFO se abre bien el modal y carga el dato descripción... pero me carga la primera descripción de los cursos... no cambia según el curso... como debería cambiar..., si por ejemplo pongo el código..
entonces en la celda... sí que sale el campo descripción de cada uno de los cursos... no siempre el mismo... por tanto el problema está a la hora de meter la información dentro del modal... no sé como hacer para que cargue el campo descripción correspondiente de cada curso y no siempre el mismo...
Otro problema, supongo que más tonto es que cuando presiono la X para cerrar el modal... se me desplaza al principio de la página pero no cierra el modal...
Estoy atascado hace días y ya no sé que más probar... mis conocimientos son muy limitados y agradecería cualquier ayuda. Muchas gracias
Llevo unos días enfrascado intentando que una ventana modal me cargue un dato que tengo en una pagina de wordpress, es un sistema de inscripciones en el cual tu creas los cursos con una serie de datos que vas rellenando según el curso que creas, tipo dia de inicio, horario, profesor, descripcion del curso, etc.... todo esto metido en una tabla en la que cada celda carga uno de los datos, la idea es que en la últiima celda aparezca un botón de +INFO que al presionarlo cargue una ventana modal con el dato descripcion del curso correspondiente, he conseguido que se abra el modal y cargue en ella un dato descripción mi problema es que siempre es el mismo, no cambia según el curso como sí que cambian el resto de datos en las otras celdas de la tabla.
Alguien puede echarme una mano? os dejo el código
1
2
3
4
5
6
7
8
9
10
11
12
<td width="115">
<div>
<span class="duration"><?php the_field('numero_de_clases') ?> Classes <?php the_field('tiempo_duracion'); ?>'</span>
<span class="duration"><?php the_field('numero_de_clases') ?> Clases <?php the_field('tiempo_duracion'); ?>'</span>
<span class="price"><?php the_field('precio'); ?>€</span>
</div>
</td>
<td width="40">
<div>
<span class="signup-btn"><a class='popup-content' href="#" data-reveal-id="popup"><?php echo 'INFO'; ?></a></span>
</div>
</td>
Aquí defino dos celdas en una va el dato del numero de clases y precio.... aquí cambia según la linea de curso, no problem... la linea de abajo es donde introduzco un boton que al presionarlo abre el modal. El modal es este...
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><a href="#" id="close"><img src="http://localhost/swingcats/wp-content/uploads/2020/07/close.png"/></a></div>
<div>
<h2>Descripcion</h2>
<?php the_field('descripcion'); ?>
<div style="float:left; width:100%;">
</div>
</div>
</div>
</div>
<div class="popup-overlay"></div>
</div>
además he añadido en funciones ajax...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(document).ready(function(){
$('#open').on('click', function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').on('click', function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
y en app.cs....
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
#popup { left: 0; position: absolute; top: 0;width: 100%;
z-index: 1001;
}.content-popup {
margin:0px auto;margin-top:120px;
position:relative; padding:10px; width:500px;min-height:250px;
border-radius:4px;
background-color:#FFFFFF;
box-shadow: 0 2px 5px #666666;
}.content-popup h2 {
color:#48484B;
border-bottom: 1px solid #48484B;
margin-top: 0;
padding-bottom: 4px;
}.popup-overlay {
left: 0; position: absolute; top: 0;width: 100%;
z-index: 999;
display:none;background-color: #777777;
cursor: pointer;opacity: 0.7;
}.close {
position: absolute; right: 15px;}Esto es todo lo que tengo hecho, la cuestión es que tengo dos problemas, al clickar en INFO se abre bien el modal y carga el dato descripción... pero me carga la primera descripción de los cursos... no cambia según el curso... como debería cambiar..., si por ejemplo pongo el código..
1
2
3
4
5
6
<td width="40">
<div>
<?php the_field('descripcion'); ?>
<span class="signup-btn"><a class='popup-content' href="#" data-reveal-id="popup"><?php echo 'INFO'; ?></a></span>
</div>
</td>
entonces en la celda... sí que sale el campo descripción de cada uno de los cursos... no siempre el mismo... por tanto el problema está a la hora de meter la información dentro del modal... no sé como hacer para que cargue el campo descripción correspondiente de cada curso y no siempre el mismo...
Otro problema, supongo que más tonto es que cuando presiono la X para cerrar el modal... se me desplaza al principio de la página pero no cierra el modal...
Estoy atascado hace días y ya no sé que más probar... mis conocimientos son muy limitados y agradecería cualquier ayuda. Muchas gracias
Valora esta pregunta
0
