Skip to content
Related Articles

Related Articles

jQuery Mobile Popup close() Method

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

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


Output:

jQuery Mobile Popup close() Method

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!