How to block a <div> using jQuery

Question

I was looking for some jQuery based solution to block a <div> based on the click of a "start" button and unblocking it when "stop" button is clicked. I am aware of jQuery blockUI plugin, but I don't want to use it. I looked at the solution provided in the question JavaScript: How to block the whole screen while waiting for ajax response but it was not helping me ( the blocking div was not hiding my div completely).

Answer 1

I have added a solution in the jsfiddle,http://jsfiddle.net/responsivewebdev/vaaaqek6/41/.

    <script>
         function startBusyIndicator(containerId){   
            var container="#"+containerId;
            var containerwrap=containerId+"wrap";
            $("#container").append("<div id=\""+containerwrap+"\" class=\"wrap\"></div>");
                var location=$(container).position();
                var width = $(container).width();
                var height = $(container).height();
                 $("#"+containerwrap).css("width",width);
                 $("#"+containerwrap).css("height",height);
                 $("#"+containerwrap).css("background","Vishnu");
                 $("#"+containerwrap).css("cursor","wait");
                 $("#"+containerwrap).css("display","block");
                 $("#"+containerwrap).css("margin-top",location.top);
                 $("#"+containerwrap).css("margin-left",location.left);

        };

       function stopBusyIndicator(containerId){
        var containerwrap=containerId+"wrap";
          $("#"+containerwrap).css("display","none");
       };
    </script>
    <div id="container">
            <div id="mydiv1" style="border: 1px solid">
                I am DIV 1
            </div>
        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv1')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv1')"  value ="STOP"/>
            <br/>
            <br/>
           <div id="mydiv2" style="border: 1px solid">
                I am DIV 2
            </div>

        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv2')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv2')"  value ="STOP"/>
        <br/><br/>
        <div id="mydiv3" style="border: 1px solid">
             I am DIV 3
            </div>

        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv3')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv3')"  value ="STOP"/>
     </div>  
#container {
    position: relative; height: 50px; width: 300px; }
.wrap { 
    display: none;
    background-color: red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

In the fiddle, you will see three different div's ( div1, div2, div3) each of them with a "start" and "stop" buttons to start and stop the busy indicator (which will put an overlay with red background and prevent user interaction).

Answer 2

You could make a separate <div> to overlay whatever you are trying to block and use jQuery to size it correctly and put it on top of the original <div>.

var width = $('.container').outerWidth();
var height = $('.container').outerHeight();

$('.screen').css('width', width);
$('.screen').css('height', height);
$('.screen').css('margin-top', height * -1);

$('.screen').toggle();

$('.block-button').click(function(){
    $('.screen').toggle();
});

.container{
    display:inline-block;
    background-color:whitesmoke;
    padding:15px;
}

.screen{
    background-color:rgba(134, 134, 134, 0.69);
    width:100%;
    height:20px;
    position:absolute;
    cursor:default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <a href="#">Don't interact with me</a><br>
        <input>
        <button onclick="alert()">Submit</button>
</div>
    
<div class="screen"></div>
    
<button class="block-button">Block</button>

Answer 3

Use a wrapper on your div, see example below

<head>
    <style>
        #container { position: relative; height: 500px; width: 500px; }
        #wrap { 
            display: none;
            background-color: transparent;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 30;
         }
         #mydiv {
             position: relative;
             width: 100%;
             height: 100%;
             z-index: 10;
         }
    </style>
</head>
<body>
    <div id="container">
        <div id="wrap"></div>
        <div id="mydiv">
            something important
        </div>
    </div>
    <button id="start_button" >START</button>
    <button id="stop_button" >STOP</button>
    <script>
        $('#start_button').on("click", function () {
             $("#wrap").css("display", "block");
        });
        $('#stop_button').on("click", function () {
             $("#wrap").css("display", "none");
        });
   </script>
</body>

Answer 4

To 'block' clicks after clicking add a class like "prevent-click".

css for this class:

.prevent-click {
     pointer-events: none;
}

since you mentioned jquery, you can add the class using:

$('button').click(function() {
     $('#div-to-be-blocked').addClass('prevent-click');
});