Open In App

jQuery Mobile Popup beforeposition Event

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a Web-technology built on top of jQuery. It is used to make responsive content that can be accessed on a variety of devices like tabs, mobiles, and desktops.

In this article, we will be using the jQuery Mobile Popup beforeposition event that is triggered before the popup computes the coordinates where it will appear.

Syntax:

  • Initialize the popup with the beforeposition callback specified:

    $( ".selector" ).popup({
      beforeposition: function( event, ui ) {
          // Your code goes here
      }
    });
  •  

  • Bind an event listener to the popupbeforeposition event:

    $( ".selector" ).on( "popupbeforeposition", function( event, ui ) {} );

Parameters: It accepts a callback function that holds two parameters:

  • event: It accepts Event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events across the library.

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: This example describes the uses of jQuery Mobile Popup beforeposition event.

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 - beforeposition Event</title>
  
    <link rel="stylesheet" 
          href=
    <script 
       src=
    </script>
    <script 
       src=
    </script>
  
    <script>
  
  
        $(document).ready(function () {
              // Initialize the popup with 
            // beforeposition callback specified.
            $( "#popup1" ).popup({
                beforeposition: function( event, ui ) {
                      // open the alert when the event is fired.
                    alert("beforeposition event triggered");
                }
            });
        });
  
          // A function to open the popup to
          // demonstrate the beforeposition event.
        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 beforeposition Event</h3>
  
            <p id="target">Popup will open here</p>
  
  
            <div data-role="popup" id="popup1">
                <p>Welcome to GeeksforGeeks</p>
            </div>
  
            <button style="width: 450px;" onclick="openPopup()">
                    Open Popup</button>
  
            <p id="write"></p>
  
        </center>
    </div>
</body>
  
</html>


Output:

jQuery Mobile Popup beforeposition Event

Reference: https://api.jquerymobile.com/popup/#event-beforeposition



Last Updated : 12 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads