jQuery Mobile Popup open() Method

Last Updated : 04 Jan, 2022

jQuery Mobile is a web-technology used to create responsive and accessible websites and web applications. It is built on top of jQuery.

In this article, we will use jQuery Mobile Popup open() method to open the popup using the specified option(s).

Syntax:

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

Here the options parameter is of type object which accepts 4 keys:

x: The x-coordinate where you want to display the popup.
y: The y-coordinate where you want to display the popup.
transition: It defines which transition to use when opening the popup. It accepts a String and the default value is an empty string.
positionTo: A jQuery Selector can be used to define the position where the popup is to be displayed.

CDN Links: First, add jQuery CDN links to the project.

<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 positionTo option to define where we want to open the popup.

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 openPopup(){ 
        $( "#popup1" ).popup( "open",  
                             {positionTo: "#target"} ); 
      } 
    </script> 
  </head> 
  <body> 
    <div data-role="page"> 
      <center> 
        <h2 style="color: green">GeeksforGeeks</h2> 
        <h3>jQuery Mobile Popup open Method</h3> 
  
        <p id="target">Popup will open here</p> 
   
        <div data-role="popup" id="popup1"> 
          <p>Welcome to GeeksforGeeks</p> 
        </div> 
  
        <button onclick="openPopup()"> 
          Open Popup 
        </button> 
      </center> 
    </div> 
  </body> 
</html>