title: jQuery UI dialog - Outer window scrolls while scrolling inside the dialog
body: <p>I'm using a <a href="http://en.wikipedia.org/wiki/JQuery_UI" rel="noreferrer">jQuery UI</a> dialog to show a popup containing a page. When I scroll inside the popup and if the scroll bars comes to the bottom, the parent page starts scrolling. How can I restrict the parent page from scrolling while scrolling inside the dialog?</p>
  
  <p>I've created a modal dialog using the following code.</p>
  
  <pre><code>// Dialog
  $('#dialog').dialog({
      autoOpen: false,
      width: 800,
      height: 550,
      minHeight: 500,
      maxHeight: 800,
      minWidth: 500,
      maxWidth: 900,
      modal: true,
      buttons: {
          "Cancel": function () {
              $(this).dialog("close");
          }
      }
  });
  
  $('#AddNewItems').click(function () {
      var currentURL = getURLOfCurrentPage();
      $('#dialog').dialog('open');
      $("#dialog").dialog("option", "width", 800);
      $("#dialog").dialog("option", "height", 550);
      $("#dialog").dialog( "option", "draggable", false );
      $("#dialog").dialog( "option", "modal", true );
      $("#dialog").dialog( "option", "resizable", false );
      $('#dialog').dialog("option", "title", 'My Title');
      $("#modalIframeId").attr("src", "http://myUrl");
      return false;
  });
  </code></pre>