CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerinternet-explorer-8
wezten
wezten

Reputation: 2266

All textboxes disabled after popup

This problem only occurs on IE8 (not IE8 compatibility mode). I have a file called sample.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'></script>
</head>
<body style='position:relative;z-index:1'>
<input><a href="javascript:Popup('test1.html');">Click</a>
<script>
function Popup(url) {
    overlay = $("<div style='position:fixed; width:100%; height:100%; z-index:10005'><div style='position:absolute; width:100%; height:100%; background:black; -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; filter: alpha(opacity=50);'></div>");
    iframe = $("<iframe name='Overlay' style='position:absolute; height:80%; width:80%; top:10%; left:10%;' src='" + url + "'></iframe>");
    closebut = $("<img style='position:absolute; cursor:pointer; right:10%; top:10%;' width='24px' height='24px' src='/images/close.png' onclick='RemovePopup()' >");
    overlay.append(iframe).append(closebut);
    $('body').prepend(overlay);
}
function RemovePopup() {
    overlay.animate({top:'100%'},800,'swing', function() { $(this).remove(); });
}
</script>
</div></body></html>

Here is the complete content of test1.html: <html><head></head><body><input></body></html>

So create these 2 files, open sample.htm in IE8, click the link to open the popup, type something in the textbox there, close the popup, try and type in the first textbox. If you can, repeat 2 or 3 times. Eventually the first textbox becomes disabled.

Can anyone suggest a workaround?

Thanks for any help

Upvotes: 2

Views: 1276

Answers (1)

andyb
andyb

Reputation: 43823

Essentially I think this is a focus problem. If you can get the browser into the situation where the <input> seems disabled then you can actually Tab to the <input> and enter a value as expected.

I believe the $(this).remove(); call to remove the iframe at the end of the animation is causing the problem when an element in the iframe has focus. I'd suggest giving the first <input> focus before removing the iframe.

For example, use $('input:first').focus(); if it is the first input. It seems to work in my testing here.

Upvotes: 2

Related Questions