title: jQuery- Dialog remove for window size
body: <p>I am working on a responsive website. I have to create a popup for window size lesser than <code>480px</code>, but for desktop size, the content has to be visible (not inside the popup). I am trying not to repeat the content twice.</p>
  
  <p>Here's <a href="http://jsfiddle.net/chetanmani/rjevta0o/" rel="nofollow">a fiddle link</a>.</p>
  
  <pre><code>$(document).ready(function() {
      $(window).resize();
      $("#filterOpen").click(function() {
          $("#mobileFilter").dialog("open");
  
      });
  });
  
  $(window).resize(function() {
      if ($(window).width() &gt; 480) {
          $("#mobileFilter").dialog({
              autoOpen: false,
              dialogClass: "test",
              modal: false,
              responsive: true
          });
      } else if ($(window).width() &gt; 481) {
          $("#mobileFilter").dialog().remove();
      }
  });
  </code></pre>
  
  <p>Thanks in advance.</p>