jQuery Mobile - Popup Dialog


You can place the dialog box inside the popup container by setting href to the id of the panel.


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

<!DOCTYPE html>
      <title>Popup Dialog</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>

      <div data-role = "page">
         <div data-role = "header">
         <div id = "page1" data-role = "main" class = "ui-content">
            <a href = "#popup_dialog" data-rel = "popup" data-position-to = "window" 
               data-transition = "pop" class = "ui-btn ui-btn-inline ui-icon-delete 
               ui-btn-icon-left ui-btn-b">Delete</a>
            <div data-role = "popup" id = "popup_dialog" data-theme = "b" 
               data-dismissible = "false">
               <div role = "main" class = "ui-content">
                  <h2 class = "ui-title">Do you want to delete this page?</h2>
                  <a href = "#" class = "ui-btn ui-btn-inline ui-btn-b" data-rel = "back">
                  <a href = "#" class = "ui-btn ui-btn-inline ui-btn-b" data-rel = "back">
         <div data-role = "footer">


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

  • Save the above html code as jqm_popup_dialog.html file in your server root folder.

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

Kickstart Your Career

Get certified by completing the course

Get Started