adding a blocking layer and div

[Vigilante23]

I am trying to add a blocking layer and div activated when a image is clicked. I have this code from a class I took but it is activated from a form post button:

if (valid) {
// Add a blocking layer
$('<div class="blocking"></div>').css({
"height": $(document).height(),
"width": "100%",
"position": "absolute",
"left": "0px",
"top": "0px"
}).appendTo('body');

How would I do something similar but make it activate onClick or something on an image?

[devnull69]

function addBlocking() {
   $('<div class="blocking"></div>').css({
      "height": $(document).height(),
      "width": "100%",
      "position": "absolute",
      "left": "0px",
      "top": "0px"
   }).appendTo('body');
}

$('img').click(function() {
   addBlocking();
   ...
});

[Vigilante23]

Originally Posted by devnull69

function addBlocking() {
   $('<div class="blocking"></div>').css({
      "height": $(document).height(),
      "width": "100%",
      "position": "absolute",
      "left": "0px",
      "top": "0px"
   }).appendTo('body');
}

$('img').click(function() {
   addBlocking();
   ...
});

I tried this but nothing happend. I tried it with an onClick, without. Made an ID on the img and tried that but simply nothing is happening when I click on the image. Any ideas or specifications? Sorry if it's obvious I'm really new with javascript and jQuery.

[harbingerOTV]

are you actually calling jquery in your code?

[Vigilante23]

Originally Posted by harbingerOTV

are you actually calling jquery in your code?

That's embarrassing. I wasn't. Thanks. I must've deleted it accidentally somewhere because I did have it.

[Vigilante23]

So how would I got about adding a div on top of that blocking layer?

[VIPStephan]

By applying an absolute, relative, or fixed position and giving it a higher z-index than the “blocking” div – or by putting it inside that blocking div.

As a side note: it’s better to apply styles via the stylesheet, not in the JavaScript. After all, that blocking div has a class already so you can easily address that in your CSS file.