ventana modal (solo css) con ajax
Publicado por Nicolás (1 intervención) el 31/12/2016 14:52:34
Necesito mostrar el contenido de manera modal con código css a través de una petición ajax. Actualmente tengo en mi documento una página que envía una petición Ajax para mostrar el contenido de la otra página.
He intentado agregando una clase con jquery cuando se hace esta petición, cambiando los atributos en css a esta nueva clase para hacer la transición, pero no funciona.
¿Alguien me puede ayudar?
modal.css
pagina1.php
pagina2.php
He intentado agregando una clase con jquery cuando se hace esta petición, cambiando los atributos en css a esta nueva clase para hacer la transición, pero no funciona.
¿Alguien me puede ayudar?
modal.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.modalDialog {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;pointer-events: none;
}.modalDialog.open {
opacity:1;pointer-events: auto;
}pagina1.php
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
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>pagina1</title>
<link rel="stylesheet" href="modal.css" />
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
</div>
<!--almaceno variable con atributo data-var para petición ajax--><a class="gallery" href="pagina2.php" data-var="imagenes">
VENTANA MODAL
</a>
<!--contenedor para ventana modal--><div id="openModal" class="modalDialog">
<div>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<div class="img"></div>
</div>
</div>
<!--petición ajax--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.gallery').click(function (event) {
$('#openModal').addClass('.open');
const data = this.dataset;
const url = this.href;
event.preventDefault();
$.ajax({
type: 'POST',
url, data,success (data) {
$('.img').html(data);
}});
return false;
});
</script>
</body>
</html>
pagina2.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>pagina2</title>
</head>
<body>
<?php
//tomo variable de pagina1.php
$dir = $_POST['var'];
//funcion glob para leer imágenes de directorio
foreach(glob($dir . "/" . '*.jpg') as $image) {
echo '<img src="'.$image.'" height=240>';
}?>
</body>
</html>
Valora esta pregunta
0