Opens a new popup or transitions to new content. Returns a promise like object that has useful methods.

Description

The first argument message is the text message for the popup. If provided it will be merged into options as body of the popup and it will also be centered. 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.