Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

Knowledge Base for Likno Web Modal Windows Builder.

New attributes have been added in Likno Web Modal Windows Builder v. 2.2 build #264.

Now, you are able to call a Modal Window with specific parameters for width, height, header and footer.

The general syntax is:

For width:

data-lwmw-width="{width value}"
where {width value} you can have a value in px, percentage (%) or auto.

For example: data-lwmw-width="300px"
                    data-lwmw-width="50%"
                    data-lwmw-width="auto"

For height:

data-lwmw-height="{width value}"
where {height value} you can have a value in px, percentage (%) or auto.

For example: data-lwmw-height="300px"
                    data-lwmw-height="50%"
                    data-lwmw-height="auto"

For header:

data-lwmw-header="your custom header content here"
As a custom header content you can use either simple text or HTML code.

For Example: data-lwmw-header="New Header 1" (Simple Text)
                    data-lwmw-header="<span style='color:#FFF;'>This is a new Header</span>" (HTML code)
                    or
                    data-lwmw-header="<span style=/"color:#FFF;/">This is a new Header</span>" (HTML code)

Note: Be extra careful when using quotes inside the custom header content. You can use either single quotes or /". It is recommended to use single quotes.

For footer:

data-lwmw-footer="your custom footer content here"
As a custom footer content you can use either simple text or HTML code.

For Example: data-lwmw-footer="New Footer 1" (Simple Text)
                    data-lwmw-footer="<span style='color:#FFF;'>This is a new Footer</span>" (HTML code)
                    or
                    data-lwmw-footer="<span style=/"color:#FFF;/">This is a new Footer</span>" (HTML code)

Note: Be extra careful when using quotes inside the custom header content. You can use either single quotes or /". It is recommended to use single quotes.

All the above attributes can be used in the following cases.

1. Show content as specified inside this project

1.1 Multi-sheet > Embedded

Then, the HTML code could be like below for 4 sheets;

<!-- Code for Modal Window Sheet 1 -->

<div style="text-align: center;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
    <p>&nbsp;</p>
    <p>Embedded text of<br>1st sheet</p>
    <p>&nbsp;</p>
    <p>Hello!</p>
</div>

<!-- Code for Modal Window Sheet 2 -->

<div style="text-align: center;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
    <p>&nbsp;</p>
    <p>Embedded text of<br>2nd sheet</p>
    <p>&nbsp;</p>
    <p>How are you?</p>
</div>

<!-- Code for Modal Window Sheet 3 -->

<div style="text-align: center;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
    <img src="http://www.likno.com/Images/lwmw_example_kid.jpg"
width="174"
height="175"
style="margin-top: 10px;"/>
    <p>Framed photo created with our Photo Frame Show software<br><a href="http://www.frameshow.com">check it out!</a></p>
</div>

<!-- Code for Modal Window Sheet 4 -->

<div style="text-align: center;" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">
    <p>&nbsp;</p>
    <p>Embedded text of<br>4th sheet</p>
    <p>&nbsp;</p>
    <p>Let us know what to improve, thanks!<br><br>
        <i>(use the 'Send Feedback' button in the application)</i>
    </p>
</div>

With the code above each sheet is declared to have different width, height, header and footer.

Open When

You can use the data-lwmw-width, data-lwmw-height, data-lwmw-header, data-lwmw-footer as  you wish, in order to call the modal window. This option will override the above declared attributes and all the modal window sheets will have the values you declared on modal window calling.

<a href="#" target="Modal_Window_1" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

 

1.2 Multi-Sheet > Page Elements

The HTML code in the page that the modal will be opened should look like below:

<!-- Code for Modal Window Sheet 1 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
    <p>&nbsp;</p>
    <p>Text of<br>1st sheet</p>
    <p>&nbsp;</p>
    <p>Hello!</p>
</div>

<!-- Code for Modal Window Sheet 2 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
    <p>&nbsp;</p>
    <p>Text of<br>2nd sheet</p>
    <p>&nbsp;</p>
    <p>How are you?</p>
</div>

<!-- Code for Modal Window Sheet 3 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
    <img src="http://www.likno.com/Images/lwmw_example_kid.jpg"
width="174"
height="175"
style="margin-top: 10px;"/>
    <p>Framed photo created with our Photo Frame Show software<br><a href="http://www.frameshow.com">check it out!</a></p>
</div>

<!-- Code for Modal Window Sheet 4 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">
    <p>&nbsp;</p>
    <p>Text of<br>4th sheet</p>
    <p>&nbsp;</p>
    <p>Let us know what to improve, thanks!<br><br>
        <i>(use the 'Send Feedback' button in the application)</i>
    </p>
</div>

Notes:
- "sampleClass" is an example, you can use any other value you like.
- If an element already uses another class value, HTML allows you to use multiple class values separated by space:
       <div class="anotherClass sampleClass" style="display: none;">

- Once the modal window appears the elements disappear from your page afterwards. Therefore make sure that your page elements are not visible elements, but hidden through the style="display: none;" code.

- Keep in mind that if no elements are found in your page with that class the modal window will not appear. Make sure that you have correctly selected which elements will appear by adding the correct class attribute.

1.3 Multi-sheet > HTML file

The HTML File option is the same as the Embedded option but you place the code in an external HTML file.

In the HTML File input box, you insert the name of the HTML page that holds the code for the Modal Windows.

 

 

2. Make certain links/forms in page open in this window

2.1 Single

In case of External URL

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_single" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

In case of an Element

<a href="#company_info" target="Modal_Window_1_single" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Company Info</a>

The modal window shows the following "in-page" element that uses this ID:

<div id="company_info" style="display:none; text-align: center;">
     <p>&nbsp;</p>
     <p>Hello!</p>
     <p>&nbsp;</p>
     <p>Our company is here to serve you!</p>
</div>

Notes:

- You are not restricted to a DIV, you can show any type of element, like an image for example:

<img id="company_info" src="http://www.mysite.com/images/company_info.gif" style="display:none;" />

- The ID is always unique per element, you will get an error if you use the same ID on another page element.

- Once the modal window appears the element disappears from your page afterwards. Therefore make sure that your page element is not a visible element, but it is hidden through the style="display: none;" code.

- Keep in mind that if the element you specified is not in your page the modal window will not appear. Make sure that you have correctly selected which element will appear by adding the correct ID attribute.

2.2 Multi by Divs

In case of External File

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_multi_divs" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

In case of an Element

<a href="#products_info" target="Modal_Window_1_multi_divs">Products Info</a>

...the modal window shows the following "in-page" elements (one sheet per DIV), that use this "class":

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
        <p>&nbsp;</p>
        <p>Modal Window for<br><br><b>AllWebMenus</b></p>
        <p>Create javascript menus for<br>websites in just a few clicks!</p>
        <p><a href="http://www.likno.com/allwebmenusinfo.html" target="_top">more info on this product</a></p>
</div>

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
     <p>&nbsp;</p>
     <p>Modal Window for<br><br><b>Likno Web Button Maker</b></p>
     <p>Create professional and stylish<br>web buttons in just a few clicks!</p>
     <p><a href="http://www.likno.com/web-button-maker/index.html" target="_top">more info on this product</a></p>
</div>

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
      <p>&nbsp;</p>
      <p>Modal Window for<br><br><b>Photo Frame Show</b></p>
      <img src="http://www.likno.com/Images/lwmw_example_kid.jpg" width="250" height="233" style="margin-top:10px;"/>
      <p>Framed photo created with our Photo Frame Show software<br><a href="http://www.frameshow.com">check it out!</a></p>
</div>

2.3 Multi by Links

In case of External URL

The window shows content located outside the containing page, such as another html page, an image, pdf file etc.

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_multi_links" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">Info on Product 1</a>

<a href="http://www.google.com" target="Modal_Window_1_multi_links" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">Open Google</a>

<a href="http://www.likno.com/Images/logo.gif" target="Modal_Window_1_multi_links" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">View Image</a>

<a href="http://www.likno.com/downldd/AllWebMenus_Manual.pdf" target="Modal_Window_1_multi_links" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">View PDF</a>

In case of Element (DIV, IMG etc.) of the containing page

The window shows an element located inside the containing page.

Which element?

The one that uses the same ID as the one used in the href attribute, without the "#".

For example, for this <a> link...

<a href="#company_info" target="Modal_Window_1_multi_links">Company Info</a>

...the modal window shows the following "in-page" element that uses this ID:

<div id="company_info" style="display:none; text-align: center;">
   <p>&nbsp;</p>
   <p>Hello!</p>
   <p>&nbsp;</p>
   <p>Our company is here to serve you!</p>
</div>

Notes:

- You are not restricted to a DIV, you can show any type of element, like an image for example:

<img id="company_info" src="http://www.mysite.com/images/company_info.gif" style="display:none;" />

- The ID is always unique per element, you will get an error if you use the same ID on another page element.

- Once the modal window appears the element disappears from your page afterwards. Therefore make sure that your page element is not a visible element, but it is hidden through the style="display: none;" code.

- Keep in mind that if the element you specified is not in your page the modal window will not appear. Make sure that you have correctly selected which element will appear by adding the correct ID attribute.

 

2.4 Form

Contrary to the other 3 methods, this method is not related to page links (<a> tags) but to page forms (<form> tags).

It is used so that the user views the results of a form (i.e. the content after the form's "submit" button is pressed) into a modal window opening above the page.

This use case applies when you use the _form suffix next the window's name inside the "target" attribute of a page's <form> element:

Examples of such forms in the HTML of a page:

<!-- FORM 1 -->

<form action="http://www.likno.com/form1.php" method="POST"  target="Modal_Window_1_form">
   What is your name?<br>
   <table class="highlightText" style="width: 220px; border: none;">
       <tr><td> Name: </td><td> <input type="text" name="user_name"/> </td></tr>
       <tr><td> Surname: </td><td> <input type="text" name="user_surname"/> </td></tr>
       <tr><td colspan="2" align="center"><input type="submit" value="Submit"></td></tr>
   </table>
</form>

<!-- FORM 2 -->

<form action="http://www.likno.com/form2.php" method="POST"  target="Modal_Window_1_form">
   How would you like to travel today?<br>
   <input type="radio" name="transport" id="car" value="car" checked="checked"/><label for="car">by car</label>
   <input type="radio" name="transport" id="bus" value="bus"/><label for="bus">by bus</label>
   <input type="radio" name="transport" id="bike" value="bike"/><label for="bike">by bike</label>
   <input type="submit" value="Select">
</form>

And you can call the form in the Modal Window using the specific parameters as shown below:

<form action="http://www.likno.com/form2.php" method="POST" target="Modal_Window_1_form" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">

1. First, what is a "Custom Variable"?

A custom variable is a javascript variable whose value you can update in your web page (through javascript) in order to alter the menu properties where they are used, based on your conditions or preferences.

The syntax of a custom variable is (whichever you prefer):

     <awm:myvar>

OR

<awm:myvar/>

 

Example:

The applicable properties where a custom variable can be used are:

ITEM PROPERTIES:

Text

Link

Status Bar Text

Tooltip

GROUP PROPERTIES:

Header Text

Header Tooltip

Footer Text

Footer Tooltip

If you click on the "Compile Properties" toolbar button and then the "Custom Variables" option you will see any custom variables detected to be "in use" by your project (read more about this functionality in the AllWebMenus Help section there).

2. OK, so how can I use "Custom Variables" to show the same single menu with differentiated values, when this menu is triggered as a "popup" by different page elements?

Read below how you can show the same single menu on different page elements, using different "Link" values on its items per element.

Let's assume that you have several images on your page that display different DVD movie posters.

Each of these images shows the same menu when clicking on it, offering 3 actions (menu items) for the particular DVD that opens it ("view it", "purchase it", "rate it", etc.):

Now, each item of that menu links to a page related to its action (e.g. the "Purchase DVD" item links to the "purchase.php" page, etc.). In order for the linked page to know which DVD opens it, there is also a parameter at the end of the URL (e.g. "?dvd_id=13").

For example, these are the menu links when "Item 13" (DVD 13) triggers the menu:

But how can you use a different link value on the same menu, depending on which image (page element) triggers its appearance?

This is how:

1. In AllWebMenus, use a custom variable at the final part of each item's "Link" property (instead of a "hard coded" value):

2. In your page, first specify the value of this custom variable (with javascript) and then manually trigger the appearance of the menu (also with javascript):

<img src="movie-poster-13.jpg" onclick="custom_dvd_id=13;awmShowGroup('menu-gr0',0,3,0,0,this);">

For each different page element (DVD image) use a different value prior to calling the same menu. For example:

<img src="movie-poster-14.jpg" onclick="custom_dvd_id=14;awmShowGroup('menu-gr0',0,3,0,0,this);">

<img src="movie-poster-15.jpg" onclick="custom_dvd_id=15;awmShowGroup('menu-gr0',0,3,0,0,this);">

<img src="movie-poster-16.jpg" onclick="custom_dvd_id=16;awmShowGroup('menu-gr0',0,3,0,0,this);">

In that way, the menu links eventually use a different value in their URL parameters depending on which page element (DVD image) opens it.

For more information on how to manually trigger a menu (on demand, as a "popup menu") please read the AllWebMenus Help topic of the "Manually trigger Main Menu or any Group on user action" positioning method.