Pop-ups

Default pop-up

window.open(URL, windowName [, windowFeatures])

    windowName
      - For referring to the window later on (i.e. <a target="myWindowName">)
      - If a window with this name already exists, window.open will display the new content
        in the existing window

    windowFeatures
        width=<pixels>        
        height=<pixels>       

        left=<pixels>         Left position in screen coordinates
        top=<pixels>          Top position  in screen coordinates

        menubar=yes|no        (X: Safari, Opera)
        toolbar=yes|no        (X: Opera)
        location=yes|no       URL entry field (X: FF, Opera)

        status=yes|no         Status bar (X: FF)

        resizable=yes|no      (X: FF, Safari, Opera)
        scrollbars=yes|no     (X: Safari)

        Not needed
            directories=yes|no    Special toolbar; only supported by IE6 (default: no)

            screenX=<pixels>      Same as left (X: IE, Opera)
            screenY=<pixels>      Same as top (X: IE, Opera)

        Example
            width=n,height=n,left=n,top=n,menubar=no,toolbar=no,
            location=no,status=no,resizable=yes,scrollbars=yes

<!-- Default window -->
<a href="javascript:void(window.open('index.html'))">
  ...
</a>

<!-- Custom window -->
var myWindow = window.open('filename.html','myWindow',
    'width=500,height=200,top=200,left=350,location=no,menubar=no,toolbar=no,status=no,resizable=yes,scrollbars=yes');

myWindow.focus();
myWindow.close();   // Can also use self.close();

The following code causes the current window to display "[object Window]" as its content (FF, ...):

<a href="javascript:window.open('index.html')">...</a>

To prevent this, use the void operator:

<a href="javascript:void(window.open('index.html'))">...</a>

Sample mouse behavior

flickr.com menus

• The trigger for a pop-up is not a link but an icon (which is highlighted on mouseover)
• The surrounding page is not obscured
• The surrounding page is active and usable
• Pop-up disappears when click elsewhere

• Mouse events are captured for the page, for the modal triggers, and for the open modal

When no pop-up is open
  - Clicking within trigger for a pop-up
      - New pop-up opens on click

When a pop-up is already open
  - Clicking within open pop-up
      - Clicking within trigger for open pop-up
          - Old pop-up closes on click
      - Clicking within deadspace of open pop-up
          - Nothing happens
      - Clicking within link of open pop-up
          - Link is activated on click

  - Clicking within trigger for another pop-up
      - Old pop-up closes on mousedown
      - New pop-up opens on click

  - Clicking elsewhere
      - Old pop-up closes on mousedown 

HTML select boxes

• The trigger for a pop-up is not a link but the entire select box (including the icon)
• The surrounding page is not obscured
• The surrounding page is active but not usable (:hover behavior is active in FF but not IE6; clicks elsewhere don't register)
• Pop-up disappears when click elsewhere

When no pop-up is open
  - Clicking within trigger for a pop-up
      - New pop-up opens on mousedown
 
When a pop-up is open prior to the next round of mouse events
  - Clicking within open pop-up
      - Clicking within trigger for open pop-up
          - Old pop-up closes on mousedown
      - Clicking within pulldown list of open pop-up
          - Old pop-up closes on click

  - Clicking within trigger for another pop-up
      - Old pop-up closes on mousedown
      - New pop-up does not open

  - Clicking elsewhere
      - Old pop-up closes on mousedown