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 Modal Windows Builder,  abstracted and stripped of all user’s private info.


Initial Email From:
Paolo
Initial Email Subject: modal builder 
Support Case Month: March 2013

Hello Kostas,

Just 2 quick more questions.

  1. Shall the modal window resize automatically based on the big image size?
  2. can I also include dynamically some texts related to be image? For example title and description…
  3. Is it possible to manage dynamically the overlay color of the modal?

Many thanks,
Paolo

Reply From: Likno Customer Support

Dear Paolo,

I am afraid that in order to do any of these, you will need to use the Modal Windows JavaScript API.

You can have a look at it here:

http://www.likno.com/jquery-modal-windows/api.php

If you want more help let me know and I will send you an example.

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

Tags: , , , , , , , , ,

 

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


Initial Email From:
Beverly
Initial Email Subject: ESC key not closing modal overlay in IE9 or Chrome but is in Firefox - using build 246
Support Case Month: March 2012

Here is my test page: {LINK REMOVED}

Clicking on the Chris Bruno, Marketing Manager or the email address opens the modal window coded in Web Modal Windows Builder.

But even though I have the ESC option selected, the ESC key does not close the window in IE9 or chrome (or Opera but few of our users browse with that browser).  Can you help me get this working in those browsers?  It works correctly in firefox and safari.  Clicking on the overlay closes the modal window in all browsers as does clicking the close button.

I tried this with all 3 methods of opening the modal window (target, ID and on click) but they all behave the same.

I attached the files I thought might help sort this out.

Thanks for your help.


Reply From:
Likno Customer Support

Hello,

This is actually an expected behavior. When your content is an “external page” it appears as an iframe within your modal window. In this case and when the focus is in the iframe, it is not possible to capture any keyboard events, so the Esc does not work. This is also described in the help:

clip_image001

The difference you see in the behavior of IE9 and Firefox is that in IE9 the focus automatically goes in the iframe as soon as the modal opens. Specifically the cursor goes into the “First Name” field. From what I’ve seen, this is done by a Form script in the external page but it seems it does not work as expected in Firefox.

However you can be certain of one thing in all browsers: if the focus is in the iframe then Esc won’t work, if the focus is in the main page then Esc will work.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!


Reply From:
Beverly

Thanks for helping me understand this issue.

Is there any way to set the focus on the iframe once it is launched from the clicked link?  Seems like that might make the ESC key recognized.
One modal program suggested using
setTimeout(setFocusThickboxIframe, 100);

Another one suggested this for a similar problem in safari:

if (!safari) {
myIframe.focus();
}

The external pages in question are php forms so it looks like I can't embed them so trying to think "outside of the box" without much expertise in the area (always dangerous).


Reply From:
Likno Customer Support

Hello,

Indeed your external pages will have to stay …external! It is not possible to add a PHP page any other way. Unfortunately this means that the ESC key will not work as expected.

In order for this to work, the focus needs to be on the parent page and not the iframe. However, when a user clicks in a form field, the focus is inside the iframe. You should not try to remove it from there programmatically, as then the user will not be able to write in the field!

The only way to reliably make the ESC key work in such a case would be to manually code it in the inner page. You can try adding the following code in your PHP page to see if this fixes things:

<script>
document.onkeypress = function (e) {
if (e.keyCode == 27) { // ESC
top.contactinfocanada.close ();
}
}
</script>

Note that the above code is “out of my head” and has not been tested – it is intended to direct you in the correct direction. Before using it in an “official” page, please make sure that it works at least in IE and Firefox. Also note that this will not work at all if the inner page is not coming from the *exact* same domain as the parent page. For this purpose “domain.com” and “www.domain.com” are considered different domains.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!

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

 


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