title: is it possible to load a page within the div element?
body: <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Model&lt;/title&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(document).ready(function() {  
  
      //select all the a tag with name equal to modal
      $('a[name=modal]').click(function(e) {
          //Cancel the link behavior
          e.preventDefault();
  
          //Get the A tag
          var id = $(this).attr('href');
  
          //Get the screen height and width
          var maskHeight = $(document).height();
          var maskWidth = $(window).width();
  
          //Set heigth and width to mask to fill up the whole screen
          $('#mask').css({'width':maskWidth,'height':maskHeight});
  
          //transition effect     
          $('#mask').fadeIn(1000);    
          $('#mask').fadeTo("slow",0.8);  
  
          //Get the window height and width
          var winH = $(window).height();
          var winW = $(window).width();
  
          //Set the popup window to center
          $(id).css('top',  winH/2-$(id).height()/2);
          $(id).css('left', winW/2-$(id).width()/2);
  
          //transition effect
          $(id).fadeIn(2000); 
  
      });
  
      //if close button is clicked
      $('.window .close').click(function (e) {
          //Cancel the link behavior
          e.preventDefault();
  
          $('#mask').hide();
          $('.window').hide();
      });     
  
      //if mask is clicked
      $('#mask').click(function () {
          $(this).hide();
          $('.window').hide();
      });         
  
  });
  
  &lt;/script&gt;
  &lt;style&gt;
  body {
  font-family:verdana;
  font-size:15px;
  }
  
  a {color:#333; text-decoration:none}
  a:hover {color:#ccc; text-decoration:none}
  div.window{
    border-width:3px;
    border-style:solid;
    border-color:gray;
    }
  
  #mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
  
    display:none;
  }
  
  #boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:440px;
    height:200px;
    display:none;
  
    z-index:9999;
    padding:20px;
  }
  
  #boxes #dialog {
    width:375px; 
    height:203px;
    padding:10px;
    background-color:#ffffff;
  }
  
  
  #dialog1 .d-header {
    background:url(images/login-header.png) no-repeat 0 0 transparent; 
    width:375px; 
    height:150px;
  }
  
  #dialog1 .d-header input {
    position:relative;
    top:60px;
    left:100px;
    border:3px solid #cccccc;
    height:22px;
    width:200px;
    font-size:15px;
    padding:5px;
    margin-top:4px;
  }
  
  #dialog1 .d-blank {
    float:left;
    background:url(images/login-blank.png) no-repeat 0 0 transparent; 
    width:267px; 
    height:53px;
  }
  
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#dialog" name="modal"&gt;Simple Window&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="boxes"&gt;
  
  &lt;div id="dialog" class="window"&gt;
  Simple Modal Window | 
  &lt;a href="#"class="close"/&gt;Close it&lt;/a&gt;
  
  &lt;a href="https://www.facebook.com/login.php"&gt;&lt;img src="facebook-24x24.png" width="24" height="24" alt="Facebook" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
    &lt;div id="mask"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>After clicking a simple window link a div element is created. In that div element there is a Facebook button. On clicking that Facebook button it loads the Facebook login page in new window. Is it possible to load the Facebook page in that div element itself or any other ways to do like that?</p>