Knowledge Base support case for Likno Web Modal Windows Builder, abstracted and stripped of all user’s private info.
Initial Email From: Stanley
Initial Email Subject: Help for Likno Web Modal Windows Builder
Support Case Month: March 2012
Dear Support,
I like the Modal Windows to display external web page with auto resize (this is the page to display: http://www.pcmaster.com.sg/CardScan_feature.html) when user click on the word something like "Click for product comparison".
Please advise me how to do it.
Thank you in advance for helping this.
Regards,
Stanley
Reply From: Likno Customer Support
Dear Stanley,
I am afraid that the “auto” size does not work for external pages. Other than that, you can open the external page using the following values:
To call the modal from a specific link you need to add the modal name like so:
<a href="javascript:void(0)" target="Modal_Window_1">Click for product comparison</a>
Regards,
Kostas
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: Stanley
Dear Support,
Is there any way to pass the parameter (link and modal size) to modal windows if I use the same window modal for different link (Single sheet) instead of creating each modal for each external link. As for modal size, though it can be set to percentage but it does not work in IE for height in %.
Something like lytebox:
<a href="cardScan_feature.html" class="lytebox" data-lyte-options="width:96% height:100%">Click</a> for product comparison.
<a href="office2010.html" class="lytebox" data-lyte-options="width:96% height:100%">Click</a>for Office 2010 comparison.
Regards,
Stanley
Reply From: Likno Customer Support
Dear Stanley,
You can do this too, but this can only be done using the API. In this case, it would be best to create a separate JavaScript function that accepts these parameters and opens the appropriate modal window.
Here is an example of how this would work:
function openModal(url, w, h) {
Modal_Window_1({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h});
}
Then this is an example of two links:
<a href="javascript:void(0)" onclick="openModal('compare1.html',500,400);">Click for product1 comparison</a>
<a href="javascript:void(0)" onclick="openModal('compare2.html',400,300);">Click for product2 comparison</a>
Regards,
Kostas
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: Stanley
Dear Support,
Can you take a look at this link at my testing site : {LINK REMOVED}, somewhere at the bottom of the "Description" you can see "Click here to see product features and comparison".
I use this statement to call external link:
<a href="#" target="cardScan">Click hear to see product features and comparison.
Would you please teach me how to apply your method to this modal window.
Regards,
Stanley
Reply From: Likno Customer Support
Dear Stanley,
The logic is the same as the one I described in my previous email. If you want this link to also control which page will open and the width of the window, you need to first add the following code in the <head></head> of your page:
<script>
function openModal(url, w, h) {
cardScan({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h}});
}
</script>
Then you need to change your link to the following:
<a href="havascript:void(0);" onclick="openModal('/CardScan_feature.html',800,400);">Click Here</a>
Regards,
Kostas
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: Stanley
Dear Support,
May I know is there any way to put % for width and height? (the reason why I like to switch from lytebox to model window is because of % for width and height in lytebox has compatibility issue with IE)
Regards,
Stanley
Reply From: Likno Customer Support
Hello,
Yes, on the link values, use something like this:
<a href="havascript:void(0);" onclick="openModal('/CardScan_feature.html','50%','40%');">Click Here</a>
Regards,
Kostas
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: Stanley
Dear Support,
1) I've tried that but did not work (passing width and height in %)
2) How to pass the title to each model window? (it has the same title for each model)
Regards,
Stanley
Reply From: Likno Customer Support
Hello,
I just tried it in your online page, and the size worked fine…
If you want to also change the title, then you need to add this too in the function..
The link should be:
openModal('/CardScan_feature.html','80%','40%','the title');
and the function:
function openModal(url, w, h, t) {
cardScan({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h},header:{text:t}});
}
Regards,
Kostas
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!
