swip demos | swip SVN | report issue

DOM window

$(selector).openDOMWindow({options}) & $(selector).closeDOMWindow({options})

jQuery plugin (jquery.DOMwindow.js) used to create DOM windows.

Example 1

Open a DOM window using inline content embedded in the page. The window is fixed to the centered of the viewport. This is default behavior.

Open DOM Window

Inline Content

Click overlay to close window

Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat.

Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

Example 2

Open a DOM window using ajax content that is place in a defined fixed positioned on the page (based on viewport).

Open DOM Window

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

Example 3

Open a DOM window using iframe content, that is positioned using absolute positioning (based on viewport).

Open DOM Window

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

Example 4

Open a DOM window using inline content, that is positioned using absolute positioning (based on viewport). Additinoally, this window is draggable, opened from a button instead of an <a> element, and can be closed by clicking off the window on to the page.

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

Example 5

Open a DOM window using inline content. The window is fixed to the centered of the viewport. The window has no overlay, and can only be close by clicking the close button on the page.

Open DOM Window | Close DOM Window

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

required | optional | not used

anchoredClassName - datatype:string, default:empty string
eventType - datatype:string, default:empty string, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
closeNow - datatype:boolean, default:false

Example 6

This is an anchored window using inline content. You can close the window by passing the window class as an option in the closeDOMWidow() method.

Open DOM Window | Close DOM Window

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

required | optional | not used

anchoredClassName - datatype:string, default:empty string
eventType - datatype:string, default:empty string, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
closeNow - datatype:boolean, default:false

$.openDOMWindow() & $.closeDOMWindow()

jQuery function (jquery.DOMwindow.js) used to create DOM windows.

Example 7

This is an anchored window, appearing on mouseover, using inline content.

mouseover DOM Window

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

required | optional | not used

anchoredClassName - datatype:string, default:empty string
eventType - datatype:string, default:empty string, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
closeNow - datatype:boolean, default:false

Example 8

Open a DOM window using inline content embedded in the page. The window is fixed to the centered of the viewport. This is just like example 1 except that it uses a jQuery function instead of a jQuery plugin.

Open DOM Window

Inline Content

Click overlay to close window

Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat.

Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem.

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string

Example 9

Open a DOM window using inline content embedded in the page. The window is anchored to a specified element and the anchored window is reused (positionType:'anchoredSingleWindow') when the overlay is not used.

Open DOM Window

Open DOM Window

Inline Content

close

Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.

required | optional | not used

anchoredClassName - datatype:string, default:empty string
anchoredSelector - datatype:string, default:empty string
borderColor - datatype:string, default:'#ccc'
borderSize - datatype:string, default:'4'
draggable - datatype:boolean, default:0
eventType - datatype:string, default:null, possible options:blur | focus | load | resize | scroll | unload | click | dblclick | mousedown | mouseup | mousemove | mouseover | mouseout | mouseenter | mouseleave | change | select | submit | keydown | keypress | keyup | error
fixedWindowY - datatype:number, default:100
height - datatype:number, default:500
loader - datatype:boolean, default:0
loaderHeight - datatype:number, default:0
loaderImagePath - datatype:string, default:empty string
loaderWidth - datatype:number, default:0
modal - datatype:boolean, default:0
overlay - datatype:boolean, default:1
overlayColor- datatype:string, default:'#000'
overlayOpacity - datatype:string, default:'85'
positionLeft - datatype:number, default:0
positionTop - datatype:number, default:0
positionType - datatype:string, default:'centered', options:centered | anchored | anchoredSingleWindow | fixed | absolute
width - datatype:number, default:500
windowBGColor - datatype:string, default:'#fff'
windowBGImage - datatype:string, default:null
windowHTTPType - datatype:string, default:'get', options: get | post
windowPadding - datatype:number, default:10
windowSource - datatype:string, default:'inline', options:inline | ajax | iframe
windowSourceID - datatype:string, default:empty string
windowSourceURL - datatype:string, default:empty string
Possible upgrades