title: How to have the popup dialog disappear after some time?
body: <p>How can I with jQuery + jQuery Mobile. Have an popup dialog to disappear after some time.
  This one I written work to some extent. It will disappear after sometime. However when I click the button to activate it again it doesn't work, unless I refresh the page again.</p>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
       $(document).on('pageinit', function(e) {
          $('#postnote').click(function() {
              $('#dialog').popup('open', {history: false}).delay(500).fadeOut('slow').hide();
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The page</p>
  
  <pre><code>&lt;div data-role="page" id="addnote"&gt;
      &lt;div id="dialog" data-role="popup" data-transition="fade"&gt;
          &lt;div data-role="header"&gt;&lt;h1&gt;Note posted&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-role="header" data-theme="a"&gt;
          &lt;h1&gt;Add Note&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content" data-theme="b"&gt;
          &lt;textarea id="note" rows="40" name="note"&gt;&lt;/textarea&gt;
          &lt;a href="#" id="postnote" data-role="button" data-transition="fade" data-theme="b"&gt;Post&lt;/a&gt;
          &lt;a href="#" data-rel="back" data-role="button" data-transition="slidefade" data-theme="a" data-direction="reverse"&gt;Back&lt;/a&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  </code></pre>