jQuery Mobile Popup beforeposition Event

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= 

"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> 

        $(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:

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

Article Tags :

JQuery

Web Technologies