jQuery Mobile Popup reposition() Method

Last Updated : 04 Jan, 2022

jQuery Mobile is a jQuery based JavaScript library used to develop responsive content which is accessible on a variety of devices like mobiles, tabs, and desktops.

In this article, we will use the jQuery Mobile Popup reposition() method to relocate an already opened popup. The reposition() method accepts an object as a parameter.

Syntax:

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

The keys of the options object are described below:

x: The x-coordinate where you want to relocate the popup.
y: The y-coordinate where you want to relocate the popup.
positionTo: A jQuery Selector can be used to define the position where the popup is to be relocated.

CDN Links:

<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>

Example: In the example below we used Popup open() method to open the Popup Widget then we used reposition() method with positionTo option specified to relocate the popup after 3 seconds.

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>