Método jQuery Mobile Popup reposition()

jQuery Mobile es una biblioteca de JavaScript basada en jQuery que se utiliza para desarrollar contenido receptivo al que se puede acceder en una variedad de dispositivos como móviles, pestañas y computadoras de escritorio.

En este artículo, utilizaremos el método jQuery Mobile Popup reposition() para reubicar una ventana emergente ya abierta. El método reposition() acepta un objeto como parámetro. 

Sintaxis:

$( ".selector" ).popup( "reposition", options );

Las claves del objeto de opciones se describen a continuación:

  • x: la coordenada x donde desea reubicar la ventana emergente.
  • y: La coordenada y donde desea reubicar la ventana emergente.
  • positionTo: se puede usar un jQuery Selector para definir la posición donde se reubicará la ventana emergente.

Enlaces CDN:

<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>

Ejemplo: En el siguiente ejemplo, usamos el método Popup open() para abrir el Popup Widget y luego usamos el método reposition() con la opción positionTo especificada para reubicar la ventana emergente después de 3 segundos.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Popup - reposition method</title>
  
    <link rel="stylesheet"
          href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
  
    <script>
      function openAndRepositionPopup() {
        $("#popup1").popup("open", { positionTo: "#target" });
  
        // Reposition the popup 3 seconds after opening
        setTimeout(() => {
          $("#popup1").popup("reposition", 
                             { positionTo: "#repositionTarget" });
        }, 3000);
      }
    </script>
  </head>
  
  <body>
    <div data-role="page">
      <center>
        <h2 style="color: green">GeeksforGeeks</h2>
        <h3>jQuery Mobile Popup reposition Method</h3>
  
        <p id="target">Popup will open here</p>
        <br />
  
        <div data-role="popup" id="popup1">
          <p>Welcome to GeeksforGeeks</p>
        </div>
  
        <button style="width: 450px"
          onclick="openAndRepositionPopup()">
          Open Popup
        </button>
  
        <br />
        <p id="repositionTarget">
          Popup will move here 3 seconds after opening
        </p>
      </center>
    </div>
  </body>
</html>

Producción:

jQuery Mobile Popup reposition() Method

Referencia: https://api.jquerymobile.com/popup/#method-reposition

Publicación traducida automáticamente

Artículo escrito por vpsop y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *