Feature available since Build #236, September 7, 2011
This topic elaborates further on the "Opens on Page Load (method 5)" feature of Likno Web Modal Windows Builder .
A modal window can open automatically when the page appears, with any of the following methods:
Method 5.1 (interface)
Specify this feature inside the project (through the interface)
Just check this option:
Note: Only one modal window can open automatically on page load (so do not use this option for multiple windows on the same page).
Method 5.2 (variable)
Use a javascript variable in the page that contains the modal window
In the HTML code of your page add the following code:
<script>var modalwindowname_open=1;</script>
OR
<script>var modalwindowname_open="SheetName";</script>
where:
modalwindowname is the name of your modal window here:
For example, the proper code for showing the 2nd modal window of the above project is:
<script>var Modal_Window_2_open=1;</script>
(the value "1" specifies the window's sheet if more than one exists, see below)
Notes on "Method 5.2" (variable in page):
- if the modal window is a "multi-sheet" one, you can use a different value (other than "1") in the variable to specify a different sheet to appear (other than the 1st one) when the modal window opens.
You may also use a "sheet name" instead of a number (sheet order), if you expect that the sheet order may change in the future (by adding new sheets between the existing ones, etc.).
How?
Remember that a "multi-sheet" window is defined by consecutive DIVs.
You can add an attribute called lwmwSheetName to the particular sheet (DIV) that you want to be displayed when the modal window opens and then use its value in the variable.
For example, for the following "multi-sheet" window that contains 4 sheets...
<div>
<p>This is the content of the sheet for the product "iPhone"</p>
</div>
<div lwmwSheetName="product_iPad">
<p>This is the content of the sheet for the product "iPad"</p>
</div>
<div>
<p>This is the content of the sheet for the product "iMac"</p>
</div>
<div lwmwSheetName="product_Mac_mini">
<p>This is the content of the sheet for the product "Mac mini"</p>
</div>
...you may open the modal window "on Page Load' with the "iPad" sheet displayed, by using ANY of the 2 following HTML code in the page:
<script>var modalwindowname_open=2;</script>
OR
<script>var modalwindowname_open="product_iPad";</script>
As you realize, the 2nd implementation will still work if you later decide to change the order of the "iPad" sheet from 2nd to 1st, but requires some additional code when initially setting up the sheet's "DIV".
On the other hand, the 1st implementation is simpler as no additional code is required anywhere, but it is only safe as long as you are sure that the order of the sheets will remain unchanged in the future.
- if multiple projects use the same modal window name (in the same page), add the compiled project name in front of the variable to distinguish the window:
<script>var my_first_project_Modal_Window_1_open=1;</script>
Important! If you use dashes ('-') in your compiled project name, you need to make them underscores ('_'). For example, if your project name is likno-modal-project.js, the variable should be as follows:
<script>var likno_modal_project_Modal_Window_1_open=1;</script>
Method 5.3 (anchor in URL)
Use a special anchor in the URL that opens the page
Open the page that contains the modal window using a special "anchor" on its URL:
http://www.mysite.com/mypage.html#modalwindowname_1
OR
http://www.mysite.com/mypage.html#modalwindowname_SheetName
For example, this is a proper URL if the name of the modal window is "Modal_Window_2":
http://www.mysite.com/mypage.html#Modal_Window_2_1
Notes on "Method 5.3" (anchor in URL):
- this method works only when the page is opened by a link from another page, not from the same page (because most browsers do not refresh the page when the link is from the same page).
- if the modal window is a "multi-sheet" one, you can use a different number at the end (other than "1") to specify a different sheet to appear (other than the 1st one) when the modal window opens.
You may also use a "sheet name" instead of a number (sheet order), if you expect that the sheet order may change in the future (by adding new sheets between the existing ones, etc.).
How?
Remember that a "multi-sheet" window is defined by consecutive DIVs. You may optionally add an attribute, called lwmwSheetName, to the particular sheet (DIV) that you want to be displayed when the modal window opens and then use its value in the URL.
For example, for this "multi-sheet" window that contains 4 sheets...
<div>
<p>This is the content of the sheet for the product "iPhone"</p>
</div>
<div lwmwSheetName="product_iPad">
<p>This is the content of the sheet for the product "iPad"</p>
</div>
<div>
<p>This is the content of the sheet for the product "iMac"</p>
</div>
<div lwmwSheetName="product_Mac_mini">
<p>This is the content of the sheet for the product "Mac mini"</p>
</div>
...you may open the modal window "on Page Load' with the "iPad" sheet displayed, by using ANY of the 2 following URLs:
http://www.mysite.com/mypage.html#modalwindowname_2
OR
http://www.mysite.com/mypage.html#modalwindowname_product_iPad
As you realize, the 2nd URL will still work if you later decide to change the order of the "iPad" sheet from 2nd to 1st, but requires some additional code when initially setting up the sheet's "DIV".
On the other hand, the 1st URL is simpler as no additional code is required anywhere, but it is only safe as long as you are sure that the order of the sheets will remain unchanged in the future.
- if multiple projects use the same modal window name (in the same page), add the compiled project name in front of the modal window name to distinguish the window:
http://www.mysite.com/mypage.html#my_first_project_Modal_Window_1_1
Important! If you use dashes ('-') in your compiled project name, you need to make them underscores ('_'). For example, if your project name is likno-modal-project.js, the variable should be as follows:
http://www.mysite.com/mypage.html#likno_modal_project_Modal_Window_1_1
- you can also add multiple anchors in the same URL to specify initial parameters for other Likno controls that exist in the same page, such as tabs, accordions, etc.!
Example: http://www.mysite.com/mypage.html#my_modal_window_1#my_tab_control_3#my_accordion_control_2
(for more info on their usage read the respective Help section of Likno Web Tabs Builder, Likno Web Accordion Builder, etc.)
