For a div with a CSS-defined cursor, IE doesn't automatically reset the cursor if the mouse doesn't move while that div is made to hide
I know that's a mouthful in the title, but here's what's happening...
I'm using Eric Martin's SimpleModal plugin in my project. When a modal popup is shown, I want to show the cursor as busy, not on the popup itself but on the overlay for the background. This is fine; it works, I added cursor:wait to the overlay div's CSS, and I don't to talk about why I shouldn't use the busy cursor.
The popup is shown when a webserive call beings and closes after some work is done (waiting for a webservice call to return -- it's initializing some things and takes a few seconds). So, if you have your mouse over the overlay, remaining still, and the popup is programmatically closed, the cursor remains busy until you move it, even though the container that had the cursor CSS defined for it is no longer under the mouse. This is not the case in Firefox.
I can reproduce it with this very simply example. Click the button, move your mouse off of the button but not onto the popup (just on the overlay), remove your hand from the mouse so it doesn't move, and wait for the popup to close itself. The cursor doesn't return to the default cursor.
<html>
<head>
<style type="text/css">
#simplemodal-overlay {
background-color: #000;
cursor: wait;
}
#simplemodal-container {
color: #fff;
background-color: #333;
border: 8px solid #444;
padding: 12px;
width: 300px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascr开发者_如何学编程ipt" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
}, 1500);
}
function showModal() {
$("#sample").modal();
}
function hideModal() {
$.modal.close();
}
</script>
</head>
<body>
<button id="actionbutton" onclick="modalTest();">Test</button>
<div id="sample" style="display:none">
<h2>Sample Data</h2>
<p>This is some sample data from the current page</p>
<p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p>
</div>
</body>
</html>
Does anybody have any suggestions? I've tried other things, like assigning and removing CSS classes to the body and using body.wait { cursor: wait; }, but for one, the same behavior occurs in IE when the CSS class is removed.
If I could keep a solution in pure CSS that would awesome, but I'm open to anything else.
EDIT:
Ok, I had a thought just as I was submitted this and tried it out, and it worked. I'm going to leave this question here in case somebody stumbles upon this. Here's the fix:
function hideModal() {
$("#simplemodal-overlay").css("cursor","default");
$.modal.close();
}
EDIT 2:
IE also doesn't change to the wait cursor if the mouse isn't moving when the popup is shown. It would seem that IE ignores cursor CSS if the mouse isn't in motion.
Although this question is somewhat old now, it seems I found a solution that worked for a very similar case I had to conquer for IE8 to IE10. In my example there is a div layer with position fixed covering the whole page having z-index 300. Its purpose is the prevention of clicks on underlying elements in the page. It has a cursor style "wait" set. When the layer was hidden that wait cursor wouldn't change to the default one as long as the mouse wasn't moved.
So this is what I came up with to mitigate the problem when hiding the layer:
// $element is the covering layer mentioned in the prelude above
$element.hide();
// Fixes the problem in IE9 and IE10
$( 'body' ).focus();
// Fixes the problem in IE8
var cursorFixLayer = $( '<div></div>' )
.css( {
zIndex: 32000,
cursor: 'default',
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'transparent'
} )
.appendTo( 'body' );
setTimeout( function() {
cursorFixLayer.remove();
}, 20 );
For simplicity reasons I only posted the according jQuery version above. I assume it should be easy to transform that to plain JavaScript if you wanted to ;-)
As a matter of fact this even fixed the problem for Chrome on Linux.
I hope this is useful for someone.
加载中,请稍侯......
精彩评论