Opens new popup or transitions to new content.
open(options);

options | object, options for the popup

OR
$('#id-content').w2popup('open', options);

options | object, options for the popup

#### Description

The first argument open is the default and can be omitted.
The second argument options is a map of properties for the popup (see overview page for valid options). Please note that options will not be replaces, but extended. If a popup is already displayed you can change the width/height (or any other property) in the following way: w2popup.open({ width: 500, height: 200 }); This method will trigger onOpen or onChange event depending if the popup was just opened or it was transitioned to the new content.

#### Examples

You can open popup defining everything in JavaScript w2popup.open({ title : 'Popup Title HTML', body : 'Body HTML', buttons : 'Buttons HTML', onOpen : function () { console.log('opened'); } }); Or from markup <div id="popup" style="display: none; width: 600px; height: 400px; overflow: hidden"> <div rel="title"> Popup #1 Title </div> <div rel="body"> This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. This is body of popup #1. You can put any text or HTML inside the body. </div> <div rel="buttons"> <input type="button" value="Switch to Popup 2" onclick="$('#popup2').w2popup()"> </div> </div> $('#popup').w2popup('open'); If you open it from markup, the width and height of the popup will be taken from the root markup element. It will also look for 3 sections for title [rel=title], body [rel=body] and buttons [rel=buttons].
IMPORTANT: If you open a popup from the markup that is already on the page, it will create two sets of same markup: one on the page and another one in the popup. It is better to load markup from a file.
Same rules apply if you load popup from the server. When you are loading from the server, you can optionally add #id at the end of your url. This allows to select a particular popup element, if server returns multiple in the same file. w2popup.load({ url: 'server/url/page.html#popup' }); See load method.