title: How to get a modal window to pop out of an iframe?
body: <p>I'm new to web coding so forgive me if this is a dumb question/ awkward wording. </p>
  
  <p>I'm trying to get a dialogue in the child page to pop out of the confines the an iframe into the parent page (hosting the iframe). So the resulting of the modal would overlap the elements on the parent page. </p>
  
  <p>I've tried $('.modalwindow').appendTo: $(window.parent.document).find('body'), which is not working.</p>
  
  <p>Here's what I have so far, and it doesn't seem to work either. child.html: </p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
          &lt;button class="btn"&gt;Open Me&lt;/button&gt;
          &lt;div class="modalwindow"&gt;
              &lt;iframe id="apple" src""&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt; 
          $(".modalwindow").dialog({
              autoOpen: false,
              modal: true,
              closeText: "",
              closeOnEscape: true,
              width: 500,
              height: 600,
              //dialogClass: "no-close",
              //dialogClass: "theme",
              //zIndex: $.maxZIndex()+ 1,
              open: function(ev, ui){
               $('#apple').attr('src','http://www.nytimes.com');}
          });
          $('.btn').click(function(){
              $('.modalwindow').dialog('open');
          });
  $(".modalwindow").appendTo: $(top.document.body); // Not working, and messes up dialog. 
  &lt;/script&gt;
  </code></pre>