Question

How to produce frameless window in HTML5, JavaScript, please?

I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.

By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars… It looks like a standalone image with painted close button.

Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?

EXAMPLE:

As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.

The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.

Answer 1

just for quicks to show the concept ..

create two divs directly under body

  <div id="backmask"></div>
  <div id="contentwindow"></div>

  <!-- somewhere else in your page -->
  <a href="somepage.html" class="showinwindow">click me</a>

css for these ( roughly )

  <style type="text/css">

    #backmask { 
      display:block; 
      width:100%;
      height:100%;  
      background-color:black;
      position:absolute; top:0; left:0;
      z-index:1000;
      display:none;

      opacity:0.7;
      filter:alpha(opacity=70);
     }

    #contentwindow { 
      display:block; 
      width:800px;
      height:600px;  
      background-color:white;
      position:absolute; top:50px; left:50px;
      z-index:1001;
      display:none;
     }

    .bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
  </style>

and then ( im using jquery for quicks )

   <script type="text/javascript">

   $(".showinwindow").click( function(e) {

   /* we don't want the visitor to leave, stop the normal action */
   e.preventDefault();

   /* get what to show */
    var contenttoload = $(this).attr.("href");

  /* set the body up */
  $("body").addClass("bodywithwinOpenClass");

   /* show wins and masker */
   $("#backmask").css("display","block");
   $("#contentwindow").css("display","block");

  /* load the content  */
  $("#contentwindow").load(contenttoload);

   });
   </script>

this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find

• the reverse is needed to “close” it