Por defecto, las ventanas emergentes aparecerán directamente sobre el elemento pulsado. Para controlar la posición de la ventana emergente, use el atributo de posición de datos en el enlace que se usa para abrir la ventana emergente.
Hay tres formas de posicionar la ventana emergente:
| Valor de Atributo | Descripción |
|---|---|
| data-position-to="window" | Aparece centrado en la ventana |
| data-position-to="#myId" | Aparece sobre el elemento con #id especificado |
| data-position-to="origin" | Default. Aparece directamente sobre el elemento clickeado |
<!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 data-role="main" class="ui-content">
<a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">Aparece centrado en la ventana</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">Aparece sobre el elemento con id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">Posición por default</a>
<div data-role="popup" id="myPopup1" class="ui-content">
<p>Centrado.</p>
</div>
<div data-role="popup" id="myPopup2" class="ui-content">
<p>Sobre elemento con id="demo".</p>
</div>
<div data-role="popup" id="myPopup3" class="ui-content">
<p>Sobre el elemento.</p>
</div>
<p>Esto es un parrafo.</p>
<p>otro parrafo.</p>
<p>Esto tambien es un parrafo.</p>
<p>Parrafo con un child <span id="demo" style="color:red;">span</span> elemento con id="demo", dentro del parrafo.</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Resultado:
No hay comentarios:
Publicar un comentario