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

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