Для div с курсором, определенным CSS, IE не сбрасывает автоматически курсор, если мышь не двигается, пока этот div скрывается.

Я знаю, что в названии написано несколько слов, но вот что происходит ...

Я использую в своем проекте подключаемый модуль Эрика Мартина SimpleModal. Когда отображается модальное всплывающее окно, я хочу, чтобы курсор был занят не во всплывающем окне, а в наложении фона. Это хорошо; он работает, я добавил cursor:wait в CSS оверлея div, и я не хочу говорить о том, почему мне не следует использовать курсор занятости.

Всплывающее окно отображается при возникновении вызова webserive и закрывается после выполнения некоторой работы (ожидание возврата вызова веб-службы - некоторые вещи инициализируются и занимает несколько секунд). Итак, если вы наведете указатель мыши на наложение, оставаясь неподвижным, а всплывающее окно программно закрыто, курсор остается занятым, пока вы его не переместите, даже если контейнер, для которого был определен CSS курсора, больше не находится под указателем мыши. В Firefox этого не происходит.

Я могу воспроизвести это на очень простом примере. Нажмите кнопку, отведите указатель мыши от кнопки, но не на всплывающее окно (только на наложение), уберите руку с мыши, чтобы она не двигалась, и подождите, пока всплывающее окно не закроется. Курсор не возвращается к курсору по умолчанию.

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

Есть ли у кого-нибудь предложения? Я пробовал и другие вещи, такие как назначение и удаление классов CSS для тела и использование body.wait { cursor: wait; }, но, во-первых, такое же поведение происходит в IE при удалении класса CSS.

Если бы я мог сохранить решение на чистом CSS, это было бы здорово, но я открыт для всего остального.

ИЗМЕНИТЬ:

Хорошо, у меня возникла мысль, когда я отправил это и попробовал, и это сработало. Я собираюсь оставить этот вопрос здесь, на случай, если кто-нибудь наткнется на него. Вот исправление:

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

ИЗМЕНИТЬ 2:

IE также не переключается на курсор ожидания, если мышь не двигается при отображении всплывающего окна. Казалось бы, IE игнорирует CSS курсора, если мышь не движется.


jquery css internet-explorer simplemodal cursor
person Cᴏʀʏ    schedule 04.11.2010    source источник
comment
По той же теме: stackoverflow.com/questions/2453807/   -  person Cᴏʀʏ    schedule 05.11.2010
comment
Спасибо! Работал как шарм.   -  person canisrufus    schedule 23.04.2011

Ответы (1)


arrow_upward
2
arrow_downward

Хотя этот вопрос сейчас несколько устарел, похоже, я нашел решение, которое сработало для очень похожего случая, который мне пришлось преодолевать для IE8 и IE10. В моем примере есть слой div с фиксированной позицией, покрывающий всю страницу с z-index 300. Его цель - предотвращение щелчков по нижележащим элементам на странице. У него установлен стиль курсора "ожидание". Когда слой был скрыт, курсор ожидания не изменился на значение по умолчанию, пока мышь не перемещалась.

Вот что я придумал, чтобы смягчить проблему при скрытии слоя:

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

Для простоты я разместил только соответствующую версию jQuery выше. Я полагаю, это должно быть легко преобразовать это в простой JavaScript, если вы захотите ;-)

Фактически, это даже устранило проблему для Chrome в Linux.

Надеюсь, это кому-то пригодится.

person alex3683    schedule 20.03.2014
comment
Интересно ... Спасибо, что поделились и немного оживили тему. Мне любопытно, почему манипуляции с DOM исправляют IE8, когда я предполагаю, что что-то очень похожее уже происходит с модальной библиотекой, которую я использовал. - person Cᴏʀʏ; 20.03.2014
comment
Пути IE загадочны;) Я предполагаю, что IE теперь вынужден пересчитывать все для отображения, включая новый курсор, потому что недавно созданный div - это то, чего он не знал раньше. Напротив, document.body был уже известен и, следовательно, возможно, проигнорирован при обновлении представления. - person alex3683; 20.03.2014