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 =
< 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:
Reference: https://api.jquerymobile.com/popup/#method-reposition
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...