Подождите, курсор на всю HTML-страницу - PullRequest
Новая
       28

Подождите, курсор на всю HTML-страницу

86 голосов
/ 11 октября 2008

Можно ли простым способом установить курсор на «ожидание» на всей html-странице? Идея состоит в том, чтобы показать пользователю, что что-то происходит во время завершения вызова ajax. Код ниже показывает упрощенную версию того, что я пробовал, а также демонстрирует проблемы, с которыми я сталкиваюсь:

  1. если элемент (# id1) имеет установленный стиль курсора, он будет игнорировать тот, который установлен в теле (очевидно)
  2. некоторые элементы имеют стиль курсора по умолчанию (а) и не будут отображать курсор ожидания при наведении курсора
  3. элемент body имеет определенную высоту в зависимости от содержимого, и если страница короткая, курсор не будет отображаться ниже нижнего колонтитула

Тест: 

<html>
    <head>
        <style type="text/css">
            #id1 {
                background-color: #06f;
                cursor: pointer;
            }

            #id2 {
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="id1">cursor: pointer</div>
        <div id="id2">no cursor</div>
        <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
    </body>
</html>

Позже редактировать ...
Он работал в Firefox и IE с: 

div#mask { display: none; cursor: wait; z-index: 9999; 
position: absolute; top: 0; left: 0; height: 100%; 
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}

<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>

Проблема с (или особенностью) этого решения заключается в том, что оно предотвратит щелчки из-за перекрывающегося div (спасибо Kibbee)

Позже, позже отредактируйте ...
Более простое решение от Dorward: 

.wait, .wait * { cursor: wait !important; }

, а затем 

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

Это решение показывает только курсор ожидания, но позволяет клики.

Ответы [ 12 ]

0 голосов
/ 17 октября 2017

Я использовал адаптацию Эрика Венделина . По всему телу будет отображаться прозрачный анимированный оверлей ожидания деления, щелчок будет заблокирован ожидающим делителем, пока он виден:

CSS: 

div#waitMask {
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    cursor: wait;
    background-color: #000;
    opacity: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

ЯШ: 

// to show it
$("#waitMask").show();
$("#waitMask").css("opacity"); // must read it first
$("#waitMask").css("opacity", "0.8");

...

// to hide it
$("#waitMask").css("opacity", "0");
setTimeout(function() {
    $("#waitMask").hide();
}, 500) // wait for animation to end

HTML: 

<body>
    <div id="waitMask" style="display:none;">&nbsp;</div>
    ... rest of html ...
0 голосов
/ 10 сентября 2013

BlockUI - это ответ на все вопросы. Попробуйте.

http://www.malsup.com/jquery/block/

Страница:
...