How to darken background except of one element?

N

3

8

How to darken entire body except of one element which is div .search-bar. In my case it's only darken on click and do nothing after!

But my goal is to be focused on click and if it's clicked to any other area darke

This is how output should look like ->

<div class="search-bar">
    <input type="text" class="search-btn" placeholder="Поиск по ключевым словам">
</div>

And ->

$(function () {

    darkenColor();

});

var darkenColor = function ($color) {

    var $color = $('.search-bar');

    $color.click(function () {


        $(function () {
            var docHeight = $(document).height();
            $('body').append("<div id='overlay'></div>");
            $('#overlay')
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });
            });
            $(this).css({
                'background' : '#fff',
                'position' : 'relative',
                'z-index' : 5700,
            });


    });


}

Novak answered 10/1, 2018 at 10:3 Comment(0)

H

21

non jQuery answer:

apply this CSS to your element

box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);

Hairline answered 15/6, 2021 at 4:21 Comment(3)

This is such a marvelous simple solution. It should count as the answer to this question. I have done screen dimming in multiple ways before, but your solution tops it all! The only thing i would add to make the solution work on all screen size would be to do this: box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3); – Gant 22/9, 2021 at 15:13

@Gant great suggestion! updated – Hairline 23/9, 2021 at 10:22

This won't work if any of the containing elements have their overflow set to something other than visible – Potent 29/6, 2023 at 16:56

H

2

It's been a while, but another way of accomplishing it is with the use of the jquery-dim-background.

All you do is load this script after your jQuery:

<script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>

And then, let's say you want to only focus on a specific element, and you want the rest to be dimmed/darkened. You do this:

$('#theElementYouWantFocused').dimBackground();

Whatever happens next is up to you. Then, whenever you want to bring things back to normal, you do:

$.undim();

And that's it!

Here's a snippet of it working. Scroll down and run it so you can see how it works!

Dimming your background - snippet

html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
}

#actionBox:hover {
  box-shadow: 0 0 8pt #111;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}

<!DOCTYPE html>
<html>

<head>
  <title>Basic element dimming demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#actionBox')
        .mouseenter(function() {
          $(this).dimBackground();
        })
        .mouseleave(function() {
          $(this).undim(); // Note: We could also use `$.undim();`
        });
    });
  </script>
</head>

<body>
  <h1>Basic Demo</h1>
  <div class="info">
    <p>
      <b>Move your mouse cursor over Box #5 and see how anything else on
                this page becomes dimmed.</b>
    </p>

  </div>
  <div class="boxes">
    <div class="box">
      <h2>Box #1</h2>
    </div>
    <div class="box">
      <h2>Box #2</h2>
    </div>
    <div class="box">
      <h2>Box #3</h2>
    </div>
    <div class="box">
      <h2>Box #4</h2>
    </div>

    <div class="box" id="actionBox">
      <h2>Box #5</h2>
      <p>
        Hover me!
      </p>
    </div>

    <div class="box">
      <h2>Box #6</h2>
    </div>

    <div class="box">
      <h2>Box #7</h2>
    </div>
    <div class="box">
      <h2>Box #8</h2>
    </div>
    <div class="box">
      <h2>Box #9</h2>
    </div>
  </div>
</body>

</html>

UPDATE

Here is a link to the official basic demo: jQuery Dim Background Demo
Here is a link to the GitHub documentation of this package: GitHub - jQuery Dim Background
If you read the docs, you can also find a that you can modify the darkness (how dim you want the background to be), which may be useful to some of you. For example, here is another snippet:

Variable Dimming of your background - another snippet

// Note -> 0: no dimming, 1: completely black

function dimNothing() {
  $('#dim-nothing').dimBackground({darkness : 0});
}

function dimABit() {
  $('#dim-a-bit').dimBackground({darkness : 0.1});
}

function dimMedium() {
  $('#dim-medium').dimBackground({darkness : 0.5});
}

function dimATon() {
  $('#dim-a-ton').dimBackground({darkness : 0.9});
}

function dimPitchBlack() {
  $('#dim-pitch-black').dimBackground({darkness : 1});
}

$(document).ready(() => {
  $('#dim-nothing').mouseenter(() => dimNothing()).mouseleave(() => $.undim());
  $('#dim-a-bit').mouseenter(() => dimABit()).mouseleave(() => $.undim());
  $('#dim-medium').mouseenter(() => dimMedium()).mouseleave(() => $.undim());
  $('#dim-a-ton').mouseenter(() => dimATon()).mouseleave(() => $.undim());
  $('#dim-pitch-black').mouseenter(() => dimPitchBlack()).mouseleave(() => $.undim());
});

html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
  color: black;
}

.hightlight:hover {
  box-shadow: 0 0 8pt #FFF;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  </head>
  <body>
    <div class="info">
      <h1>Example Demo with variable dimming</h1>
      <p>
        <b>Hover over the boxes to see different levels of dimming!</b>
      </p>
      <div class="boxes">
        <div class="box hightlight" id="dim-nothing">
          <h2>Box #1</h2>
          <p>
            I will actually not dim anything.
          </p>
        </div>
        <div class="box hightlight" id="dim-a-bit">
          <h2>Box #2</h2>
          <p>
            I will dim the screen just a bit!
          </p>
        </div>
        <div class="box hightlight" id="dim-medium">
          <h2>Box #3</h2>
          <p>
            I will dim the screen!
          </p>
        </div>
        <div class="box hightlight" id="dim-a-ton">
          <h2>Box #4</h2>
          <p>
            I will dim the screen a ton!
          </p>
        </div>
        <div class="box hightlight" id="dim-pitch-black">
          <h2>Box #5</h2>
          <p>
            I will dim the screen <b>PITCH BLACK!</b>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Haematocele answered 9/5, 2020 at 7:27 Comment(0)

E

1

You can add a class to the body when the input has focus using .focus().

And remove that class when it loses focus with .focusout().

simple example...

$('#js-search').focus(function() {
  $('body').addClass('is-dimmed');
})

$('#js-search').focusout(function() {
  $('body').removeClass('is-dimmed');
})

body {
  background: url(https://unsplash.it/1000)
}

.search {
  background: white;
  height: 100px;
  display: flex;
}

.search input {
  width: 100%;
  font-size: 3em;
  z-index: 1;
}

.is-dimmed:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input type="search" id="js-search">
</div>

Engelhart answered 10/1, 2018 at 10:12 Comment(2)

Thanks a lot, but how can I make that if it's clicked not to the input it will not darken the entire body? – Novak 10/1, 2018 at 10:19

Sorry I don't understand. Can you explain a bit more? – Engelhart 10/1, 2018 at 10:22

Dimming your background - snippet

UPDATE

Variable Dimming of your background - another snippet

Recommended topics

Hot tags