Pour une div avec un curseur CSS-défini, IE ne réinitialise pas automatiquement le curseur si la souris ne bouge pas pendant que ce div est caché

Je sais que c'est une bouchée dans le titre, mais voici ce qui se passe .. J'utilise l'extension SimpleModal d'Eric Martin dans mon projet. Quand un popup modal est affiché, je veux montrer le curseur comme occupé, pas sur le popup lui-même mais sur la superposition pour l'arrière-plan. C'est bon; cela fonctionne, j'ai ajouté cursor:wait au CSS de l'overlay div, et je ne parle pas de pourquoi je ne devrais pas utiliser le curseur occupé. La fenêtre contextuelle est affichée lorsqu'un appel webserive se ferme et se ferme après un certain travail (en attente d'un appel de service Web à retourner - il initialise certaines choses et prend quelques secondes). Ainsi, si vous avez placé votre souris sur la superposition, en restant immobile et que la fenêtre contextuelle est fermée par programmation, le curseur reste occupé jusqu'à ce que vous le déplaciez, même si le conteneur contenant le curseur CSS n'est plus sous la souris. Ce n'est pas le cas dans Firefox.Pour une div avec un curseur CSS-défini, IE ne réinitialise pas automatiquement le curseur si la souris ne bouge pas pendant que ce div est caché

Je peux le reproduire avec cet exemple très simple. Cliquez sur le bouton, déplacez votre souris du bouton mais pas sur le popup (juste sur la superposition), retirez votre main de la souris pour qu'elle ne bouge pas, et attendez que le popup se ferme. Le curseur ne revient pas au curseur par défaut.

<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/javascript" 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>

Quelqu'un a-t-il des suggestions? J'ai essayé d'autres choses, comme assigner et supprimer des classes CSS au corps et utiliser body.wait { cursor: wait; }, mais pour un, le même comportement se produit dans IE lorsque la classe CSS est supprimée.

Si je pouvais garder une solution en CSS pure, ce serait génial, mais je suis ouvert à toute autre chose.

EDIT:

Ok, j'ai eu une pensée juste comme je soumettais cela et ai essayé, et cela a fonctionné. Je vais laisser cette question ici au cas où quelqu'un trébucherait sur ce point. Voici la solution:

function hideModal() { 
    $("#simplemodal-overlay").css("cursor","default"); 
    $.modal.close(); 
}

EDIT 2:

IE ne change pas non plus le curseur d'attente si la souris ne se déplace pas lorsque la fenêtre est affichée. Il semblerait que IE ignore le curseur CSS si la souris n'est pas en mouvement.

Source

2010-11-04 Cᴏʀʏ

Sur le même sujet: http://stackoverflow.com/questions/2453807/javascript-mouse-cursor-change-on-page-load-in-firefox-browser-3-5 –

Merci! Travaillé comme un charme. – canisrufus

Bien que cette question soit un peu ancienne maintenant, il semble que j'ai trouvé une solution qui a fonctionné pour un cas très similaire que j'ai dû conquérir pour IE8 à IE10. Dans mon exemple, il existe une couche div avec une position fixe couvrant toute la page ayant un z-index 300. Son but est de prévenir les clics sur les éléments sous-jacents de la page. Il a un style "attente" défini par curseur. Lorsque la couche était masquée, le curseur d'attente ne passait pas à celui par défaut tant que la souris n'était pas déplacée.

donc ce que je suis venu avec pour atténuer le problème en se cachant la couche:

// $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);

Pour des raisons de simplicité je ne posté la version jQuery selon ci-dessus. Je suppose qu'il devrait être facile de transformer cela en JavaScript simple si vous le vouliez ;-)

En fait, cela a même résolu le problème pour Chrome sous Linux.

J'espère que c'est utile pour quelqu'un.

Source

2014-03-20 10:01:05 alex3683

Intéressant ... Merci de partager et d'apporter un peu de vie au fil. Je suis curieux de savoir pourquoi la manipulation DOM corrige IE8 quand je présume que quelque chose de très similaire se passe déjà avec la bibliothèque modale que j'utilisais. –

Les manières d'IE sont mystérieuses;) Ma supposition est, que IE est maintenant forcé de recalculer tout pour l'affichage comprenant le nouveau curseur, parce que le div nouvellement créé est quelque chose qu'il ne savait pas avant. En revanche, le document.body était déjà connu et donc peut-être ignoré lors de l'actualisation de la vue. – alex3683

Pour une div avec un curseur CSS-défini, IE ne réinitialise pas automatiquement le curseur si la souris ne bouge pas pendant que ce div est caché

Répondre

Questions connexes