Skip to content
Related Articles

Related Articles

jQuery Mobile Popup reposition() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jan, 2022
View Discussion
Improve Article
Save Article

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=
    <script src=
    </script>
    <script src=
    </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>


Output:

jQuery Mobile Popup reposition() Method

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!