Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().
You can open the debug window if you want to see some debug outputs.

Do not forget to check PWC-OS

This sample opens a simple window with some parameters like specific hide and show effects. This sample use a wired frame for move/resize.

This sample opens a window with site in it. It uses another theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit
This sample opens a window with green div on the right as content. It will keep the same size and position. Close the window to restore the div in the page.
It also uses a window observer to restore the div after closing the window.

This sample opens a alert dialog with the default alert theme (alert.css). width/height/okLabel are specified and also ok callback function.

This sample opens a confirm dialog with the default alert theme (alert.css). width/okLabel are specified and also ok/cancel callback function. Height is not set so the dialog will fit content's height. It also change ok/cancel button class (CSS above).

<style> #myDialogId .myButtonClass { padding:3px; font-size:20px; width:100px; } #myDialogId .ok_button { color:#2F2; } #myDialogId .cancel_button { color:#F88; } </style>

This sample opens a info dialog with a progress image. It will be display 3 seconds with a countdown.

This advanced sample opens a login window with a nice effect if login fails. The window update also its height to display an error message to avoid scrollbars. The login window design is done in the HTML file with display:none.
Here is the login HTML code (see also login CSS file):

<div id="login" style="display:none"> <p><span id='login_error_msg' class="login_error" style="display:none">&nbsp;</span></p> <div style="clear:both"></div> <p><span class="login_label">login</span> <span class="login_input"><input type="text"/></span></p> <div style="clear:both"></div> <p><span class="login_label">password</span> <span class="login_input"><input type="password"/></span></p> <div style="clear:both"></div> </div>

Instead of writing HTML in the same page, fill the dialog with an Ajax request. (View the requested file info_panel.html, do view source to see HTML content)

9. Samples included in the distrib

  • Constraint: Constraint move/resize inside a div, insiade a page event by settings top/bottom/left/right margins.
  • Multi Modal: Open three modal windows one by one. You can keep them visible or hidden one by one.
  • Window Store add-on: Save in cookies windows location but also open/close status.
  • Window Key add-on: Set a key to close dialog (escape key by default)
  • Tooltip add-on: Use PWC to create tooltips. Tooltips will stay visible if you move your mouse over. You can add forms or links inside. Tooltip content can be HTML, Ajax or an URL.