jQuery Mobile - Closing Popups

Description

You can close the popups by clicking outside the popup box or by pressing the Esc key. You can stop the closable by clicking outside the popup box using the data-dismissible = "false" attribute.

Example

Following example demonstrates the use of closing popups in the jQuery Mobile Framework.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Closing Popups</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>
         
         <a href = "#popup_right" data-rel = "popup" class = "ui-btn ui-btn-inline">
            Right close button</a><br>
            
         <a href = "#popup_left" data-rel = "popup" class = "ui-btn ui-btn-inline">
            Left close button</a><br>
            
         <a href = "#popup_undismissible" data-rel = "popup" class = "ui-btn 
            ui-btn-inline">Undismissible Popup</a>
            
         <div data-role = "popup" id = "popup_right" class = "ui-content">
            <a href = "#" data-rel = "back" class = "ui-btn ui-btn-a ui-icon-delete 
               ui-btn-icon-notext ui-btn-right">Close</a>
            <p>Welcome to Tutorialspoint.....</p>
         </div>
         
         <div data-role = "popup" id = "popup_left" class = "ui-content">
            <a href = "#" data-rel = "back" class = "ui-btn ui-btn-a ui-icon-delete 
               ui-btn-icon-notext ui-btn-left">Close</a>
            <p>Welcome to Tutorialspoint.....</p>
         </div>
         
         <div data-role = "popup" id = "popup_undismissible" class = "ui-content" 
            data-dismissible = "false">
            <a href = "#" data-rel = "back" class = "ui-btn ui-btn-a ui-icon-delete 
               ui-btn-icon-notext ui-btn-left">Close</a>
            <p>You cannot close the popup by clicking outside. You can close 
            this by clicking at top left corner.</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_closing_popups.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_closing_popups.html and the following output will be displayed.

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements