In this presentation it is described how to create a jQuery Modal Window using Likno Web Modal Windows Builder. Likno Web Modal Windows Builder is a powerful application for creating any type of jQuery Modal Windows (popup boxes, dialog boxes, etc.). Likno Web Modal Windows Builder info: http://www.likno.com/jquery-modal-windows/index.php Examples: http://www.likno.com/jquery-builders/examples.php?p=lwmw&e=n Download: http://www.likno.com/jquery-modal-windows/download.php

1. How to create
a jQuery Modal Window using
Likno Web Modal Windows Builder
www.likno.comLikno Web Modal Windows Builder

2. 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

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

4. 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

5. Save your project, select the folder where you want to save it and give it a name.
www.likno.comLikno Web Modal Windows Builder

6. 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

7. 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

8. 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

9. 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

10. In Style Editor tab in Open/Close section you can define the open/close effects.
www.likno.comLikno Web Modal Windows Builder

11. 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

12. 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

13. 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

14. In Preview tab you can see your modal window in action.
www.likno.comLikno Web Modal Windows Builder

15. 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

16. 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

17. 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

18. Visit www.likno.com for more information