Make a background that on click goes back to another page

[Simona_1]

Hello,

I am making a website ... I have a body class with background color, and a div container inside that has some content. What I want to do is to make the background clickable, and when you click it it should redirect to another page. In other words, I want my background to act like the div with the content inside it is a modal and when you click on it to redirect to different page.

*it is not a modal. I do not need a modal.

Thank you

[gentlemedia]

If you put a click handler on the body, than everything inside the body, like your content div, will also trigger that click and that's not what you want. I know you said you don't want a modal, but you can use the same technique most modals use for this to close the modal and that is by adding an overlay div dynamically with JS, or jQuery in your case, which you positions behind your content div and then put the click handler on the overlay.

HTML:

<div class="content">
  content
</div>

CSS:

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  position: relative;
  z-index: 1;
}

jQuery:

var overlay = $('<div>', {'class':'overlay'}).appendTo('body');

$('.overlay').on('click', function () {
  window.location.href = "https://www.google.com";
});

Here's the above in a Codepen (with some extra CSS just for demo purposes), but I used an alert, because redirecting to Google or any other website is not possible in a Codepen.
https://codepen.io/gentlemedia/full/pmYXde