title: Jquery Mobile: Automatically display a popup / dialog
body: <p>I am trying to create a dialog box or a popup message that is automatically shown of a certain condition is met. In my case, if $.POST fails, I want to display a message to the user. I have taken advice from this <a href="https://stackoverflow.com/questions/6101370/creating-a-dialog-jquery-mobile">SO</a> post and the popup is displayed, but the entire screen is covered with the popup and the close button doesn't do anything. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;title&gt;jQuery Mobile Web App&lt;/title&gt;
  &lt;link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="common.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div data-role="page" id="contactsPage"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;My Contacts&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;   
          &lt;ul data-role="listview" id="contactsList" data-filter="true"&gt;
          &lt;script&gt;
          var jqxhr = $.post("http://www.somewhere.com/...", 
          {
              org_id:"112211",
              max_last_modified_date:"2000-12-31 13:00:00 +0000"
          },
              function(data) {
                  $('#contactsList li').remove();
                  JSONResult = JSON.parse(data);
                  for (var i = 0; i &lt; JSONResult.contacts.contact.length; i++) {
                      //Do something
                  }
  
                  $('#contactsList').listview('refresh');
              });
              jqxhr.fail(function() {
                  $('#dialogText').html("There was a problem connecting to the internet. Please check your mobile data or WIFI connection and try again."); 
                  $.mobile.changePage("#connectionErrorDialog");
              });
          &lt;/script&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-role="dialog" id="connectionErrorDialog"&gt;
      &lt;div id="dialogText"&gt;&lt;/div&gt;
      &lt;button id="closeDialog"&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there any way to set the dimensions of the screen and make the close button work? Is this the right approach to automatically display a dialog / popup to the user? Any assistance would be greatly appreciated.</p>