jQuery Mobile Popup close() Method

Last Updated : 04 Jan, 2022

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for creating responsive websites and web apps. It is built on top of jQuery.

In this article, we will use jQuery Mobile Popup close() method to close an already opened popup. This method doesn’t accept any parameter.

Syntax:

$( ".selector" ).popup( "close" );

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 will use Popup close() method to close the opened popup after 3000ms. We have used JavaScript setTimeout() method to wait for 3000ms.

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"} ); 
  
        setTimeout(() => { 
          // Invoke the close() method after 3seconds 
          $( "#popup1" ).popup( "close"); 
        }, 3000); 
      } 
    </script> 
  </head> 
  <body> 
    <div data-role="page"> 
      <center> 
        <h2 style="color: green">GeeksforGeeks</h2> 
        <h3>jQuery Mobile Popup close Method</h3> 
  
        <p id="target"> 
          Popup will open here and will  
          close after 3 seconds 
        </p> 
  
        <div data-role="popup" id="popup1"> 
          <p>Welcome to GeeksforGeeks</p> 
        </div> 
  
        <button style="width: 350px;" 
          onclick="openPopup()"> 
          Open Popup 
        </button> 
      </center> 
    </div> 
  </body> 
</html> 