Knowledge Base support case for Likno Web Modal Windows, abstracted and stripped of all user’s private info.


Initial Email From:
Beverly 
Initial Email Subject: Help with scroller software using likno modal windows settings - project files
Support Case Month: September 2013

Any ideas on getting the ESC key and overlay click to close the modal window when opened with a scroller? I didn't find any of the examples to had a modal window attached to them to test on the likno website or in the examples included with the scroller software.
Modal window opens fine, is customized just as expected from modal windows project, and will close using the Close X icon/text in the upper right hand corner, just can't close the modal window via clicking on the overlay or the esc button.

Reply From: Likno Customer Support

Hello Beverly,

The modal window closes when i click ESC, when I click on overlay area and also when I click the close button. Tested in all browsers. I guess you get confused on overlay as your modal window is big enough and the overlay is just a small, so you might have confused it with the space right after the form, but this is part of your modal content, not the overlay area, that's why clicking there do nothing. (see the attached screenshot to see the overlay area according to your modal window).

Let me know if you need more information.

Thank you!

Kind Regards,  

Aggelos Tsakonas
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Beverly

Got it & it makes sense - is there any way to decrease the overlay colored area inside the content window that doesn't close with click/esc &/or increase the modal overlay colored area that does close with click/overlay? I think if I was confused other users might be too. Still not sure why esc quits working to close window after clicking in the modal colored area inside the content window, seems like esc should always work.

Reply From: Likno Customer Support

Hello Beverly,

I would recommend you to use width/height values that fit your design (maybe something around 350px width).

You have set specific values for each of your modal windows and you have set the width/height to 100%, so it tries to fit in the whole window.
In order to correct that, go to each modal window and set those values to specific pixels. (see the attached screenshot).

Let me know if you need more information.

Thank you!

Kind Regards,  

Aggelos Tsakonas
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Beverly

This makes perfect sense, thanks again for all your great technical support (it is one reason I purchase your software, unlike other companies, you actually respond).

 

Tags: , , , , ,

 

Knowledge Base support case for Likno Web Scroller Builder, abstracted and stripped of all user’s private info.


Initial Email From:
John
Initial Email Subject: Web Scroller Builder - How to control vertical position of items within their container
Support Case Month: June 2013

Hi Kostas and crew

A very quick question.  Starting with the Example12 BBC layout, I've removed the top area, made some other minor changes, and made the item area the same size as the container area.  I have sized my images so that there is spare height within the item area for a caption beneath the image. 

Now I need the images to align to the top of the container area, so that there is no black area above the photo of the volcano in the attached PDF (and so making the height of the black area at the bottom larger). 

How?

If you could wiz me back an answer this afternoon that would be great!

My HTML (from ASP.NET) is in this form:

<ul>
    <li>
        <img>
        <p>caption<p>
    </li>
</ul>

Many thanks for your help.

Regards,
John

Reply From: Likno Customer Support

Hello John,

You need to have the same height in BOTH the "Container" and "Items":

scroller slider container area height

scroller slider items area height

Because you cannot change the "middle" vertical alignment of the items (it is like that by design for other reasons).

So, also remove this, it cannot do anything:

scroller slider hand coded CSS

Kind Regards,
Aris
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: John

Hi Aris

If I do that then there is no space for the caption beneath the image.  How can I then display the caption?

John

Reply From: Likno Customer Support

You will still have room below the image to add the caption, as long as the image height is smaller than the items height.

I did this on your project here:

scroller slider image caption

Kind Regards,
Aris
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: John

Thanks very much Aris. That works.

John

 

Tags: , , , , , , , ,

 

 

In this article we will see how we can change the Default Drop-Down (Horizontal and Vertical) menus from JavaScript to CSS menus. Then, we will see how to compile them and insert both of them in a page.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down) as the menu theme for the first window that appears.

SNAGHTML4942d9c

Then, we save the menu project and let's give it the name HorizontalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)"

image

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

image

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set HorizontalMenu.js.

image

 

Let's create the Vertical Menu now.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down)[v] as the menu theme for the first window that appears.

SNAGHTML4ad239e

Then, we save the menu project and let's give it the name VerticalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)" (same as in the HorizontalMenu).

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set VerticalMenu.js.

image

 

After that we can create the HMTL page in which we want both of the menus to appear.

The basic structure of our page could initially be:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
</head>

<body>
</body>
</html>

and we are going to give it the name CSSmenus.html

Then, we need to go back to our AllWebMenus projects and Link the menus to the page.

First, we go to HorizontalMenu.awm and we click on Link Menu, we select the html file(s), in this example the CSSmenus.html, we click on right arrows to select it and finally we click on Link.

image

We do the same process for the VerticalMenu.awm

In the next step we need to add the UL/LI structure for our menus in the CSSmenus.html page (as in a CSS menu we need to insert the ul/li structure in the page).

So, we go back to HorizontalMenu.awm and we click on Settings as shown in the following screenshot. Then, we click on "OR <UL><LI> structure based on your current project's structure" tab, we select all the structure and we copy it. We go to our html page and we paste that structure.

image

We do the same step for the VerticalMenu.awm.

Last step but not least is to set the correct positioning for our menus.

I would suggest to select the Menu Positioning relative to an element. So, we click on Menu Positioning, we select Relative to an Element and we can leave the Default ID. We copy that value in order to paste it in the page in an element we are going to create.

After that, we need to re-compile the project, just click Compile.

image

Then, we go to the HTML page and we create the element with the ID we copied. The element could look like :
<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
and we place it before the UL/LI structure for the horizontal menu.

Then, we do the same process for the vertical menu and the element in the page could look like:
<div id="awmAnchor-VerticalMenu"> &nbsp; </div>

The final result in our page will be:

image

and the code is:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
<!-- ******** BEGIN ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<link href="HorizontalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="HorizontalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
<link href="VerticalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="VerticalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
</head>

<body>

<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
<ul id="awmULLI-HorizontalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="awmAnchor-VerticalMenu"> &nbsp; </div>
<ul id="awmULLI-VerticalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>
</body>
</html>

When we are done we need to upload to our server the following:

image

Which are the HTML page containing the menus, the CSS files and JS files produced after we compiled the 2 projects and the awmdata folder.

 

Tags: , , , , , , , , , ,

 

Knowledge Base support case for Likno Web Modal Windows Builder,  abstracted and stripped of all user’s private info.


Initial Email From:
User
Initial Email Subject: Different height/width modal window 
Support Case Month: August 2013

Hi,

I have a modal window project and I need to open the modal window in different width/height each time. How can I do that with your new data-lwmw-width and data-lwmw-height attributes?

Thanks

Reply From: Likno Customer Support

Hello,

You can call (open) the modal window in different width/height as:

<a href="#" target="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</a>

and you can have another element that opens the same modal window in different dimensions.

<a href="#" target="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</a>

and so on, you can use different width/height values each time you call the modal window.

The above links will open the modal window with a width of 500px and height of 40% in the first case and with auto width and auto height in the second case.

or if you use an ID or a Class to trigger the modal window

<span id="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p id="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

<span class="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p class="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

You can also use TD, DIV, IMG, INPUT to trigger the modal window.

For the data-lwmw-width and data-lwmw-height you can have any value you want as long it is px or % or you can have it as auto.

Thank you!

Best Regards,
Aggelos Tsakonas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

 

Tags: , , , , , , ,

 

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

multisheet modal window, embedded code

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

multisheet modal window, 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

multi-sheet modal window, 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

Single Modal Window

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

Multi by Divs Modal Window

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

Multi by Links Modal Window

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

Form Modal Window

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!">

 

Tags: , , , , , , , , ,

 


© 2009-2013 Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows