发表新帖
发表新帖

Wait cursor over entire html page

后端 未结
关注
14 1302
离开以前
离开以前 2020-12-02 14:19

Is it possible to set the cursor to \'wait\' on the entire html page in a simple way? The idea is to show the user that something is going on while an ajax call is being com

相关标签:
14条回答
  • 情话喂你
    2020-12-02 14:27

    This seems to work in firefox

    <style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>

    The * part ensures that the cursor doesn't change when you hover over a link. Although links will still be clickable.

    0 讨论(0)
  • 醉酒成梦
    2020-12-02 14:30

    css: .waiting * { cursor: 'wait' }

    jQuery: $('body').toggleClass('waiting');

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-02 14:31

    I understand you may not have control over this, but you might instead go for a "masking" div that covers the entire body with a z-index higher than 1. The center part of the div could contain a loading message if you like.

    Then, you can set the cursor to wait on the div and don't have to worry about links as they are "under" your masking div. Here's some example CSS for the "masking div":

    body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
    0 讨论(0)
  • 孤城傲影
    2020-12-02 14:36

    I used a adaptation of Eric Wendelin's solution. It will show a transparent, animated overlay wait-div over the whole body, the click will be blocked by the wait-div while visible:

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

    js:

    // 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 讨论(0)
  • 深忆病人
    2020-12-02 14:37

    If you use this slightly modified version of the CSS you posted from Dorward,

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

    you can then add some really simple jQuery to work for all ajax calls:

    $(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

    or, for older jQuery versions (before 1.9):

    $(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
    0 讨论(0)
  • 时光说笑
    2020-12-02 14:37

    Try the css:

    html.waiting {
cursor: wait;
}

    It seems that if the property body is used as apposed to html it doesn't show the wait cursor over the whole page. Furthermore if you use a css class you can easily control when it actually shows it.

    0 讨论(0)
 看不清?
提交回复
热议问题