Prototype window

With this demo you can add an window in a HTML code. The code uses Prototype and is inspired by script.aculo.us library. It has been tested successfully on all browsers.

Download code Visit demo

Tags: window

<< SlideShow Viewer Ajax Tabs >>

Prototype window demo

Changes to the code below will update the demo above in real time.

win.setDestroyOnClose(); 
  win.show();
  win.setConstraint(true, {left:10, right:20})
  win.toFront();
}

function win2()
{
  var win = new Window({id: "win2", className: "alphacube", title: "Sample", width:200, height:150}); 
  win.getContent().innerHTML = "<h1>Constraint inside page !!</h1>constraint: {top: 30, bottom:10}<br><a href='#' onclick='Windows.getWindow(\"win2\").maximize()'>Maximize me</a>";

win.setDestroyOnClose(); 
  win.showCenter();
  win.setConstraint(true, {left:0, right:0, top: 30, bottom:10})
  win.toFront();
}

function win3()
{
  var win = new Window({id: "win3", className: "alphacube", title: "Sample", width:250, height:150, wiredDrag: true}); 
  win.getContent().innerHTML = "<h1>No Constraint</h1>Wired mode<br><a href='#' onclick='Windows.getWindow(\"win3\").maximize()'>Maximize me</a>"; 
  win.setDestroyOnClose(); 
  win.setLocation(10, 500);
  win.show();
  win.toFront();
}

</script>

June 25, 2007, 7:32 p.m. - Test: this is the comment
Sept. 9, 2007, 1:54 p.m. - Cyclops: This script is fantastic! Thanks for sharing!
Sept. 22, 2007, 7:52 a.m. - Physche: How would you go about making these windows pop open? I think this would be a fantastic way to open up additional info boxes on a website... embed video etc.
Sept. 25, 2007, 1:35 a.m. - way: i just want this auto complete comment system js code
Oct. 3, 2007, 4:29 p.m. - dave: dear TL..this is a gud ajax coding
Nov. 19, 2007, 10:04 a.m. - Hups: how can i load another html in the window ???
Dec. 15, 2007, 4:36 a.m. - aravind: is this all open source??
April 7, 2008, 12:46 p.m. - Henry K: The link is dead... Can someone please post the source code for me? Thanks!
April 22, 2008, 3:34 p.m. - Kousha: Is there a way to have actual pages inside those windows? How can I include another page in one of those windows?
May 1, 2008, 7:39 a.m. - alex: Very good ! That's very great !
May 8, 2008, 12:31 p.m. - coderbari: This example will help me
July 16, 2008, 9:46 a.m. - beatle: A-A-A ! ! ! it's greatfull
Aug. 5, 2008, 10:42 a.m. - IsmSal: Very Nice Work. Is this free?? without license?
Aug. 19, 2008, 12:43 p.m. - rohan: Wow Incredible, will try it on my website:) thanx
Aug. 19, 2008, 1:12 p.m. - koa: yeah! its fuking shit
Sept. 23, 2008, 3:04 a.m. - fenris: Это реально круто, чувак
Sept. 28, 2008, 4:07 a.m. - RudiRatlos: it's what I was searching for. Great, thanx a lot!
Oct. 3, 2008, 11:55 a.m. - Ivan: Ahora si te luciste pero bueno aun asi con unos cuantos errores en el uso
Dec. 16, 2008, 10:51 a.m. - CodeLover: by the way.. #container with no background !
Dec. 26, 2008, 3:42 a.m. - Webster: Heelo, please can some one tell me how to open a window when clicking a text. ex: Click here to open window (when clicking this a window will be opened). Thank you very much
March 17, 2009, 4:30 p.m. - LDB: Unable to close or minimize with ie6.
April 23, 2009, 6:38 a.m. - Remi: 2LDB: so, dump ie6
April 29, 2009, 5:35 a.m. - Amit Shah: Not working at my end
May 10, 2009, 3:18 p.m. - nathfla: hi how are you i love this tutorial i was wondering if you had an idea on how to hide the boxes and call them to open through a link, i was successful opening it with a link but i don't want the boxes to appear on the page till i have clicked on the link, thanks a million for your help.
June 24, 2009, 3:31 p.m. - samser: I am curious whether the script is not being updated or maintained frequently.
July 11, 2009, 4:04 p.m. - Fernando: Hello. I have a concern, if I add a button to the window with the label "Cancel", what code should I add the method "onclick" to close the window? debo aregar al método "onclick" para que la ventana se cierre ??
July 13, 2009, 7:17 p.m. - Ben: hi Nathfla you could use some jquery function like: $(document).ready(function(){ $("#win1").hide(); $("#win2").hide(); $("#win3").hide(); });
July 29, 2009, 5:39 p.m. - desarrollos web: Grat contribution. Thanks for sharing.
Oct. 11, 2009, 11:43 p.m. - vaibhav: hi, its nice, but when i click on minimize and then try to maximize it is not working.
Oct. 18, 2009, 4:22 a.m. - taviram: The window is open but with borders around each part of the window. Does any one know how to get rid of those borders!!!!!
Oct. 31, 2009, 4:16 a.m. - ravi: This seems to be good but not working properly.
Dec. 3, 2009, 10:32 p.m. - Ashutosh: too good example but can we add a video in the slide
March 1, 2010, 12:55 p.m. - Dan: I..I....amayzing :D
March 27, 2010, 7:58 p.m. - Drew Toma: When you have more than 9 or so windows if one opens on page load you cant close or control the window.
April 13, 2010, 11:44 a.m. - Dave: I`m using FishEye for my menu system, but there is a conflict when trying to run Prototype Window on the same page. Does anyone have a solution? Thanks
Nov. 22, 2010, 1:38 a.m. - Burhan: Good work man...
Jan. 17, 2011, 9:49 a.m. - senthil: thank you
July 4, 2011, 4:13 p.m. - Luiz Rafael: setDestroyOnClose not works in Google Chrome...
March 21, 2012, 9:19 a.m. - Ram: Awesome work i utilize it, thanks for this and i expect more!!!!!!!!
April 30, 2012, 10:05 a.m. - sonic656: Why if I load jquery 1.7.2, there are errors and windows will not open?