CODEWITHSUNDEEP
htmlcssloader
RackM
RackM

Reputation: 449

How to disable background during loader is showing

I am showing loader when user clicks on button. Following is the loader class

.loader-box{ background:rgba(0,0,0,0.8); position:fixed; bottom:0; left:0; top:0; width:100%; height:100%; z-index:100;}

My problem is when loader is showing then user can move cursor by using tabs and click submit also, how to prevent this? Is this possible using any css property or do i need to do anything else ?

Upvotes: 0

Views: 9864

Answers (3)

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

Put your loader to a div that fills the page:

#loaderParent{
position: fixed;
width:100vw;
height:100vh;
}

Or if you have problem to show/hide this div make the loader itself fill the page:

 .loader-box{
     position: fixed;
     width:100vw;
     height:100vh;
 }

To prevent keyboard:

  $(document).keydown(function () { return false; });

and after fading the loader change it back:

 $(document).keydown(function () { return true; });

A sample:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input type="button" value="Test Tab" />
<input type="button" value="Test Tab" />
<input type="button" value="Test Tab" /><br><br>
<input type="button" value="Disable KeyDown" onclick="DisableKeyDown()" />





<script>
  function DisableKeyDown(){
       $(document).keydown(function () { return false; });
       }
</script>

Upvotes: 0

Ganesh Radhakrishnan
Ganesh Radhakrishnan

Reputation: 350

I am posting a example to help u. We can use "tabindex" attribute to focus the element when using tab key. 

<div class="loader-box">
    <div class="formwrapper">
        <input type="text" name="name" tabindex="01" placeholder="text 01">
        <input type="text" name="name" tabindex="02" placeholder="text 02">
        <input type="text" name="name" tabindex="03" placeholder="text 03">
        <input type="button" name="button" tabindex="04" value="Submit">
    </div>
</div>

<style type="text/css">
    .loader-box { 
        background:rgba(0,0,0,0.8); 
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0; 
        width:100%; 
        height:100%; 
        z-index:100;
    }
    .formwrapper {
        font-family: arial;
        width: 200px;
        height: 200px;
        margin:auto;
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0;
        right: 0; 
        text-align: center;
        color: #000;
        background: #c1c1c1;
        border-radius: 10px;
    }
    input {
        padding: 5px;
        width: 80%;
        margin:8px 10px;
    }
</style>

Upvotes: 1

Alex Ul
Alex Ul

Reputation: 19

You can enable/disable input:

     $("#...").attr('disabled','disabled'); // disable
     $("#...").removeAttr('disabled'); //enable

Example:

http://jsfiddle.net/juvian/R95qu

Upvotes: 0

Related Questions