jQuery Mobile - Popup Arrow

Description

Displays the popup with an arrow and specifies the arrow to the popup using "l(left)","r(right)","t(top)" and "b(bottom)".

Example

Following example demonstrates the use of popup arrow in the jQuery Mobile Framework.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Popup Arrow</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <p>Click the buttons to open a popup with an arrow.</p>
            <a href = "#pop1" data-rel = "popup" class = "ui-btn ui-btn-inline" 
               data-position-to = "#arrow_demo">Left</a>
            <a href = "#pop2" data-rel = "popup" class = "ui-btn ui-btn-inline" 
               data-position-to = "#arrow_demo">Right</a>
            
            <div data-role = "popup" id = "pop1" class = "ui-content" data-arrow = "l">
               <p>Arrow on left side..</p>
            </div>
            
            <div data-role = "popup" id = "pop2" class = "ui-content" data-arrow = "r">
               <p>Arrow on right side.</p>
            </div>
            
            <p>Welcome to <span id = "arrow_demo" style = "color:red;">
            Tutorialspoint...</span>.</p>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
         
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as jqm_popup_arrow.html file in your server root folder.
Open this HTML file as http://localhost/jqm_popup_arrow.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started