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

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

2 голосов
/ 04 ноября 2010

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

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

Всплывающее окно отображается, когда веб-вызов вызывает и закрывается после выполнения некоторой работы (ожидание возврата вызова веб-службы - оно инициализирует некоторые вещи и занимает несколько секунд). Таким образом, если вы наведите курсор мыши на оверлей, оставаясь неподвижным, и всплывающее окно программно закрывается, курсор остается занятым, пока вы не переместите его, даже если контейнер, для которого был определен курсор 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, если мышь не движется.

1 Ответ

2 голосов
/ 20 марта 2014

Хотя этот вопрос уже несколько устарел, похоже, я нашел решение, которое сработало для очень похожего случая, который мне пришлось победить в IE8 для IE10.В моем примере есть слой div с фиксированным положением, покрывающий всю страницу с z-индексом 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.

Я надеюсь, что этополезно для кого-то.

...