Darken background on opening keyboard

[ghost]

Hey, I guess my request is a bit of a CSS type, but I can't come up with a solution. Basically, I would like to darken the whole background or blur it and the focus of the user to be entirely on the keyboard.

Here is what I'm working on: calculator

Any ideas? Thank you!

[Mottie]

Hi @exyoris!

Try something like this (demo):

CSS

body.overlay-active:after {
  content: ' ';
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Script

$(function() {

  $('#keyboard')
    .keyboard({
        visible: function() {
        $('body').addClass('overlay-active');
      },
      hidden: function() {
        $('body').removeClass('overlay-active');
      }
    });

});

[ghost]

Thank you very much again, Mottie! You're the best! 👍 😄

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.