How to create a jQuery Modal Window

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.

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

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

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

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.

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.

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

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

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

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.

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.

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.

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

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.

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.

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.

Visit www.likno.com for more information

How to create a jQuery Modal Window

More Related Content

Viewers also liked (19)

Recently uploaded (20)

How to create a jQuery Modal Window