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