Fotos Popup
También puede mostrar imágenes en una ventana emergente:
Nota: Las ventanas emergentes no son ideales cuando tiene todo un conjunto de imágenes que desea mostrar (como un álbum con 500 imágenes). Sin embargo, para un par de imágenes que necesitan verse más grandes, son perfectas.
Nota: Las ventanas emergentes no son ideales cuando tiene todo un conjunto de imágenes que desea mostrar (como un álbum con 500 imágenes). Sin embargo, para un par de imágenes que necesitan verse más grandes, son perfectas.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Bienvenido</h1>
</div>
<div id="pageone" data-role="main" class="ui-content">
<p>Click para abrir la imagen</p>
<p>Nota: se agrego boton regresar en la esquina superior derecha.</p>
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="imagen.png" alt="Skaret View" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<p>Ampliada!!!</p>
<a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="imagen.png" style="width:600px;height:200px;" alt="Skaret View">
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Resultado:
Al hacer Clic
No hay comentarios:
Publicar un comentario