How to create a jQuery Modal Window using

Likno Web Modal Windows Builder

www.likno.comLikno Web Modal Windows Builder

Likno Web Modal Windows Builder is a powerful application for creating jQuery Modal Windows.

You can create any modal window through its WYSIWYG interface without writing any code.

There are a lot of ways to define the content of your modal window and many ways to render it on your page.

www.likno.comLikno Web Modal Windows Builder

First, open Likno Web Modal Windows Builder.The application starts with an empty default modal window project.

www.likno.comLikno Web Modal Windows Builder

You can start creating by the default project or browse through the Examples and then create a “New from Example”.

www.likno.comLikno Web Modal Windows Builder

Save your project, select the folder where you want to save it and give it a name.

www.likno.comLikno Web Modal Windows Builder

In Project Items tab, in Modal Windows in Project section, you can Add/Delete/Edit your modal windows.Note that you can have many modal windows in a modal window project.

www.likno.comLikno Web Modal Windows Builder

Then, you can select if you want to show the modal window content as specified inside the project or if you want to make certain links/forms in your page to open in that modal window.

www.likno.comLikno Web Modal Windows Builder

Then, you can define the content of your modal window.You have many options for the source of your modal window content.It can be an embedded content, a page element, an image, Ajax content or an external page that could be an HTML page, a PDF document etc

www.likno.comLikno Web Modal Windows Builder

In Opens When section you can see how you can call your modal window and also set some properties like: - Automatically open on page load - Automatically open on mouse out of the page - Do not re-open for the same user

www.likno.comLikno Web Modal Windows Builder

In Style Editor tab in Open/Close section you can define the open/close effects.

www.likno.comLikno Web Modal Windows Builder

In Style Editor tab in General you can set the Styling properties for your modal window.You can also set the Header and Footer Content.

www.likno.comLikno Web Modal Windows Builder

In Style Editor tab in Navigation Bar you can select the Navigation Bar for your modal window and edit its styling properties, as long as you have a multi-sheet modal window.

www.likno.comLikno Web Modal Windows Builder

In Style Editor tab in Multi-Sheet you can define some settings in case you have a multi-sheet modal window, like the transition effect, the floating arrows, the direction and more.

www.likno.comLikno Web Modal Windows Builder

In Preview tab you can see your modal window in action.

www.likno.comLikno Web Modal Windows Builder

When you have finished with your modal window, it’s time to compile it.Click on Compile and set your Site Root Folder, the Compiled JavaScript file name and the domain for which you want the modal window to work.

www.likno.comLikno Web Modal Windows Builder

Then, you need to link the modal window project to your page.Select the page or pages you want to link it to and move them to the right side.When you have selected all the pages click on the “Link” button.

www.likno.comLikno Web Modal Windows Builder

The final step is to trigger the modal window on your page.You can see the Opens When for the ways you can trigger your modal window.

www.likno.comLikno Web Modal Windows Builder

Visit www.likno.com for more information